jQuery
Case à cocher Tout sélectionner avec cocher / décocher automatiquement les autres cases à cocher
Recherche…
Introduction
J'ai utilisé différents exemples et réponses de Stackoverflow pour arriver à cet exemple très simple sur la façon de gérer la case à cocher "Sélectionner tout" associée à une vérification / décocher automatiquement si l'un des états de la case à cocher du groupe change. Contrainte: L'identifiant "select all" doit correspondre aux noms d'entrée pour créer le groupe select all. Dans l'exemple, l'entrée select all ID est cbGroup1. Les noms d'entrée sont également cbGroup1
Le code est très court, pas plein de déclaration (temps et ressources).
2 cochez toutes les cases avec les cases à cocher correspondantes du groupe
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>
<input id="cbGroup1" type="checkbox">Select all
<input name="cbGroup1" type="checkbox" value="value1_1">Group1 value 1
<input name="cbGroup1" type="checkbox" value="value1_2">Group1 value 2
<input name="cbGroup1" type="checkbox" value="value1_3">Group1 value 3
</p>
<p>
<input id="cbGroup2" type="checkbox">Select all
<input name="cbGroup2" type="checkbox" value="value2_1">Group2 value 1
<input name="cbGroup2" type="checkbox" value="value2_2">Group2 value 2
<input name="cbGroup2" type="checkbox" value="value2_3">Group2 value 3
</p>
<script type="text/javascript" language="javascript">
$("input").change(function() {
$('input[name=\''+this.id+'\']').not(this).prop('checked', this.checked);
$('#'+this.name).prop('checked', $('input[name=\''+this.name+'\']').length === $('input[name=\''+this.name+'\']').filter(':checked').length);
});
</script>
Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow