Afficher valeur id onclick sur checkbox

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

 

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 ?

 

Merci Spout.

1) Ca marche parfaitement bien.

2) Si je rajoute name="instruments[]" dans le input checkbox ça marche plus

 

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.

 

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