Afficher valeur id onclick sur checkbox

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 21 Février 2018.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    673
    J'aime reçus:
    6
    Salut à tous,

    Je voudrais afficher les valeurs de mes checkbox dans une <div> lorsqu'on clique dessus, je voudrais séparer ces valeurs par une virgule si plusieurs checkbox ont été coché.

    J'ai trouvé ce code http://jsfiddle.net/BPkR6/1/ qui fait en partie ce que je souhaite mais je voudrais que ce soit les valeurs des "id" de mes checkbox qui s'affichent, j'ai modifié le code que voici http://jsfiddle.net/BPkR6/65/ mais il ne fonctionne pas, qu'est-ce qui ne va pas dans ce code ?

    Je voudrais aussi lorsque aucune checkbox n'est coché que s'affiche dans la <div id="summary_musicians"> "Tous".

    Merci pour votre aide.

    Bruno
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
    [​IMG]
     
  3. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
  4. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    673
    J'aime reçus:
    6
    Un grand merci Spout, ça marche nickel :)

    2 détails à régler pour que ce soit parfait :

    1) Que faut il ajouter comme code lorsque aucune checkbox n'est coché afin que s'affiche dans la <div id="summary_musicians"> "Tous" ?

    2) Je garde dans une session php les choix que l'utilisateur à coché, lorque je clique sur plusieurs cases à cocher le texte s'affiche parfaitement bien dans la <div id="summary_musicians"> mais lorsque je part et je reviens sur cette page ça m'affiche dans la <div> uniquement la première valeur qui est coché (et pas les autres), je pense que c'est dû au ".change(function()" de la fonction que faudrait-il modifier/ajouter pour que ça fonctionne aussi au onload de la page ?
     
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
    1) http://jsfiddle.net/BPkR6/72/ (j'ai ajouté trigger('change') pour que ce soit 'Tous' par défaut).
    2) Il faut mettre name="instruments[]" car c'est plusieurs valeurs (un array), ensuite c'est $_POST['instruments'] (attention aussi que tu as mis la même value="150" à tous)
     
  6. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    673
    J'aime reçus:
    6
    Merci Spout.

    1) Ca marche parfaitement bien.

    2) Si je rajoute name="instruments[]" dans le input checkbox ça marche plus :)
     
  7. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
  8. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    673
    J'aime reçus:
    6
    Quand j'actualise ma page, mes cases à cocher restent bien cochés mais ça m'affiche dans la <div id="summary_musicians"> uniquement la première valeur qui est coché (et pas les autres), je pense que c'est dû au "change" de la fonction "$('input:checkbox[name="instruments[]"]').change(function()" qui lorsqu'on actualise la page ne se déclenche pas puisque qu'elle fonctionne uniquement sur un "change" des cases à cocher.
     
  9. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
    Quand tu actualises ta page, tu dois mettre les checked en PHP.
     
  10. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    673
    J'aime reçus:
    6
    Oui ça c'est fait Spout.

    Il suffit de rajouter le code ci-dessous pour que ça affiche dans la <div id="summary_musicians"> tous les choix précédemment cochés lorsqu'on actualise la page :
    Code:
    $("#summary_musicians").html(function() {
            var instruments = $('input[name="instruments[]"]:checked').map(function() {
                        return $(this).attr('id');
            }).get();
            
            if (instruments.length) {
                return instruments.join(', ');
            }
            
            return 'Tous';
    });
    
    Merci pour aide précieuse Spout ;)
     
    spout apprécie ceci.
Chargement...
Similar Threads - Afficher valeur onclick Forum Date
Afficher des valeurs d'une colonne à l'autre selon condition Développement d'un site Web ou d'une appli mobile 11 Février 2019
afficher une valeur maximale dans une table Développement d'un site Web ou d'une appli mobile 10 Novembre 2016
API pour afficher les avis Google sur son site Google : l'entreprise, les sites web, les services 10 Novembre 2019
Afficher les tags sur wordpress Développement d'un site Web ou d'une appli mobile 3 Août 2019
Extension Chrome utile pour afficher le code source HTML, JS, CSS Développement d'un site Web ou d'une appli mobile 5 Juillet 2019
Google My Business :Comment afficher sa zone de couverture et pas son adresse ? Google : l'entreprise, les sites web, les services 19 Juin 2019
Afficher/cacher données dans un tableau Développement d'un site Web ou d'une appli mobile 9 Mars 2019
Google Chrome va afficher à nouveau les sous-domaines Google : l'entreprise, les sites web, les services 18 Septembre 2018
Google PageSpeed Insight : Afficher en priorité le contenu visible Développement d'un site Web ou d'une appli mobile 16 Août 2018
Est-il important d'afficher ses pages en AMP pour être favorisé par Index Mobile First ? Référencement Google 19 Décembre 2017
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice