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
N’oubliez pas d’inclure le fichier jQuery
<script src="http://code.jquery.com/jquery-latest.js"></script>
Et maintenant le code jQuery.
$(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
}
});
});
$('#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
}
});
});
A consulter également :
ShareThis
on peut simplifier l’ecriture tel quel :
$(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’
cases.attr(‘checked’, this.checked); // on coche les cases
$(‘#cocheText’).html( (this.checked) ? ‘Tout decocher’ : ‘Tout cocher’); // mise à jour du texte de cocheText
});
});
on peut aussi utiliser l’instruction with() sur la variable cases
Salut,
quel serait le code si on devait par exemple limité a 3 checkbox une selection qui en compterait 10.. ?
Salut,
Tu peux par exemple vérifier que le nombre de cases cochées est 3){
}
Attention, par contre il faudra faire une vérification coté serveur (PHP) en plus, car le javascript est facilement contournable…
Merci pour ce bout de code.
Merci pour ton code exactement ce que je cherchais à faire
Merci, une portion de code bien pratique ! Vive jQuery !!!