如何在HTML中实现"全选"复选框？

我有一个带有多个复选框的HTML页面.

我需要一个名为"全选"的复选框.当我选中此复选框时,必须选中HTML页面中的所有复选框.我怎样才能做到这一点？

 Toggle All


 Bar 1

 Bar 2

 Bar 3

 Bar 4

更新:

该for each...in构造似乎不起作用,至少在这种情况下,在Safari 5或Chrome 5中.此代码应该适用于所有浏览器:

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i

        
切勿对集合或数组使用`for in` 
好吧,由于我的编辑因某些原因被拒绝,我想我会在这里发表评论.不推荐使用for-each构造,**将不起作用!**你必须使用它的替换:`for(复选框的复选框)`. 

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:








        
我将添加一个else子句来处理取消选择用例,;-) .. else {//迭代每个复选框$(":checkbox").each(function(){this.checked = false;}); } 
如果你想省略if和else并仍然处理取消选择你可以这样做:var state = this.checked; $(':checkbox').each(function(){this.checked = state;}); 

3> fiatjaf..：
我不确定有没有人用这种方式回答(使用jQuery):

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


它很干净,没有循环或if/else子句,可以作为魅力.

        
仅三行，简单=>易于理解，也可以取消选择。谢谢。 

4> 小智..：
要取消选择:

$('#select_all').click(function(event) {
  if(this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
          this.checked = true;
      });
  }
  else {
    $(':checkbox').each(function() {
          this.checked = false;
      });
  }
});

        
if和else不需要...只需使用`this.checked` 

5> Sumit..：
我很惊讶没有人提到过document.querySelectorAll().纯JavaScript解决方案,适用于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;
    }
}

Check all?


Bar 1

Bar 2

Bar 3

Bar 4



6> merakli..：
演示http://jsfiddle.net/H37cb/









 

   All
  

   
 Title 01
    

     
 Sub Title 01
     
 Sub Title 02
     
 Sub Title 03
     
 Sub Title 04
    
   
  
  

   
 Title 02
    

     
 Sub Title 05
     
 Sub Title 06
     
 Sub Title 07
    
   
  
 


        

7> p0rsche..：
稍微更改版本,检查和取消检查

$('#select-all').click(function(event) {
        var $that = $(this);
        $(':checkbox').each(function() {
            this.checked = $that.is(':checked');
        });
    });

        

8> 小智..：
当你打电话时document.getElementsByName("name"),你会得到一个Object.使用.item(index)遍历的所有项目Object

HTML:



?
?
?
?
?
?
?
?
?

        

9> KarenAnne..：
















        

10> 小智..：
试试这个简单的JQuery:

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

        

11> Giorgio Barc..：
我的简单解决方案允许有选择地选择/取消选择表单给定部分中的所有复选框,同时为每个复选框使用不同的名称,以便在表单发布后可以轻松识别它们.

使用Javascript:

function setAllCheckboxes(divId, sourceCheckbox) {
    divElement = document.getElementById(divId);
    inputElements = divElement.getElementsByTagName('input');
    for (i = 0; i < inputElements.length; i++) {
        if (inputElements[i].type != 'checkbox')
            continue;
        inputElements[i].checked = sourceCheckbox.checked;
    }
}


HTML示例:

All of them

    
Spacey, Kevin
    
Firth, Colin
    
Johansson, Scarlett



我希望你喜欢它!

        

12> 小智..：
此示例使用本机JavaScript,其中复选框变量名称不同,即不是所有"foo".





Toggling checkboxes



 Bar 1

 Bar 2

 Bar 3

 Bar 4


 Toggle All





        
您的`getcheckboxes`函数可以替换为`document.querySelectorAll（'input [type = checkbox]'）;` 

13> Cogsy..：
JavaScript是你最好的选择.下面的链接给出了一个使用按钮来取消选择所有内容的示例.您可以尝试调整它以使用复选框,只需使用"选择所有"复选框'onClick属性.

Javascript函数检查或取消选中所有复选框

这个页面有一个更简单的例子

http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html