jQuery : cocher tout / tout décocher (checkbox)

Laisser une réponse »

Si vous avez plusieurs cases à cocher à la suite, il peut être intéressant de proposer au visiteur de les cocher toutes en un clic et de les décocher de la même façon.
Démo ici
voici donc quelques checkbox, et au dessus une case cocher tout dont le texte est entouré d’un span que l’on mettra à jour cocher/décocher
[cc width=’100%’ lang=’html’]

Cocher tout

  • Case 1
  • Case 2
  • Case 3

[/cc]
N’oubliez pas d’inclure le fichier jQuery
[cc width=’100%’ lang=’js’]

[/cc]
Et maintenant le code jQuery.
[cc width=’100%’ lang=’js’]
$(document).ready(function() {
$(‘#cocheTout’).click(function() { // clic sur la case cocher/decocher

var cases = $(« #cases »).find(‘:checkbox’); // on cherche les checkbox qui dépendent de la liste ‘cases’
if(this.checked){ // si ‘cocheTout’ est coché
cases.attr(‘checked’, true); // on coche les cases
$(‘#cocheText’).html(‘Tout decocher’); // mise à jour du texte de cocheText
}else{ // si on décoche ‘cocheTout’
cases.attr(‘checked’, false);// on coche les cases
$(‘#cocheText’).html(‘Cocher tout’);// mise à jour du texte de cocheText
}

});

});
[/cc]



ShareThis

Publicité

Laisser un commentaire