JavaScript Checkbox : tout cocher / tout décocher

Programmation JavaScript
, , , , , ,
1

J’ai un formulaire HTML avec plusieurs checkboxes.

J’ai besoin d’une autre checkboxe nommée « Tout cocher ». Quand je sélectionne cette checkboxe, toutes les checkboxes doivent être sélectionnées. Comment puis-je faire cela ?

2

Essayez le code suivant:

<script language="JavaScript">
function checkAll(source) {
  checkboxes = document.getElementsByName('ch');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}
</script>

<input type="checkbox" onClick="checkAll(this)"/><b>Tout cocher/décocher</b>
<br/>
<input type="checkbox" name="ch" value="bar1"> Checkbox 1<br/>
<input type="checkbox" name="ch" value="bar2"> Checkbox 2<br/>
<input type="checkbox" name="ch" value="bar3"> Checkbox 3<br/>
<input type="checkbox" name="ch" value="bar4"> Checkbox 4<br/>

Vous pouvez voir le résultat du code ci-dessus en cliquant sur « Run Pen »

3

Si vous utiliser la bibliothéque jQuery, voir le code suivant:

Code jQuery:

$('#select-all').click(function(event) {   
    if(this.checked) {
        $(':checkbox').each(function() {
            this.checked = true;
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;
        });
    }
});

Code HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<input type="checkbox" name="select-all" id="select-all" /> Tout cocher<br>
<input type="checkbox" id="ch1" /> A<br>
<input type="checkbox" id="ch2" /> B<br>
<input type="checkbox" id="ch3" /> C<br>