Wie implementiert man das Kontrollkästchen "Alles auswählen" in HTML?

Question

Ich habe eine HTML-Seite mit mehreren Kontrollkästchen.

Ich benötige ein weiteres Kontrollkästchen mit dem Namen "select all". Wenn ich dieses Kontrollkästchen auswähle, müssen alle Kontrollkästchen auf der HTML-Seite ausgewählt werden. Wie kann ich dies tun?

Answer 1

<script language="JavaScript">
function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var checkbox in checkboxes)
    checkbox.checked = source.checked;
}
</script>

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

UPDATE:

El for each...in construct scheint nicht zu funktionieren, zumindest nicht in diesem Fall, in Safari 5 oder Chrome 5. Dieser Code sollte in allen Browsern funktionieren:

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

Answer 2

Verwendung von jQuery :

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox-1" id="checkbox-1" />
<input type="checkbox" name="checkbox-2" id="checkbox-2" />
<input type="checkbox" name="checkbox-3" id="checkbox-3" />

<!-- select all boxes -->
<input type="checkbox" name="select-all" id="select-all" />

Answer 3

Ich bin mir nicht sicher, ob nicht jemand auf diese Weise geantwortet hat (mit jQuery ):

  $( '#container .toggle-button' ).click( function () {
    $( '#container input[type="checkbox"]' ).prop('checked', this.checked)
  })

Es ist sauber, hat keine Schleifen oder if/else-Klauseln und funktioniert hervorragend.

Answer 4

Ich bin überrascht, dass niemand erwähnt hat document.querySelectorAll() . Reine JavaScript-Lösung, funktioniert im IE9+.

function toggle(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i] != source)
            checkboxes[i].checked = source.checked;
    }
}

<input type="checkbox" onclick="toggle(this);" />Check all?<br />

<input type="checkbox" />Bar 1<br />
<input type="checkbox" />Bar 2<br />
<input type="checkbox" />Bar 3<br />
<input type="checkbox" />Bar 4<br />

Answer 5

Hier ist ein anderer Weg weniger Code

$(function () {
       $('#select-all').click(function (event) {

           var selected = this.checked;
           // Iterate each checkbox
           $(':checkbox').each(function () {    this.checked = selected; });

       });
    });