如何在HTML中实现“选择所有”复选框？

Question

如何在HTML中实现“选择所有”复选框？我有一个带有多个复选框的HTML页面。我还需要一个名为“SELECT ALL”的复选框。选择此复选框时，必须选中HTML页面中的所有复选框。我该怎么做？

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/>

最新情况：

这个for each...in构造在Safari 5或Chrome 5中似乎不起作用，至少在本例中是这样的。这段代码应该可以在所有浏览器中工作：

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

Answer 2

使用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;                       
        });
    }});

HTML：

<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

我不确定是否有人没有这样回答(使用jQuery):

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

它是干净的，没有循环，也没有if/etc子句，而且很有魅力。