选中/取消选中 jQuery 中的所有复选框答案

【问题标题】：Check/Uncheck all the checkboxes in jQuery选中/取消选中 jQuery 中的所有复选框
【发布时间】：2015-01-12 07:39:31
【问题描述】：

我对 jQuery 的了解不够，我需要一个名为“全选”的复选框。当我选中此复选框时，必须选中 HTML 页面中的所有复选框。我该怎么做？

我正在使用下面的代码，但它不能正常工作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listbox.css" />
<script src="jquery-2.1.1.min.js"></script>

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

</head>

<body>


<label for="blah">item-1</label> <input name="checkbox-1" id="checkbox-1" type="checkbox" />    
<br />
<input type="checkbox" name="select-all" id="select-all" />

</body>
</html>

我已经从 Blow 链接下载了 jQ：

http://jquery.com/download/

下载压缩的生产型 jQuery 2.1.1

http://code.jquery.com/jquery-2.1.1.min.js

【问题讨论】：

您没有绑定任何事件，因为在处理代码时，DOM 中没有元素。使用例如文档就绪处理程序

标签： jquery html css checkbox

【解决方案1】：

只是为了笑声和咯咯笑……其他答案可以找到，但我喜欢以下方法的简洁性和可重用性……所以以防万一这对任何人都有帮助：

$(document).on('click','[data-toggle=checkAll]', function() {
    var $all     = $(this),
        $targets = $( $all.data('target') )
    ;
    $targets.prop('checked', $all.is(':checked') );
}

使用上述脚本，您可以在页面上拥有任意数量的“checkAll”复选框...每个“check all”复选框只需要指定不同的目标选择器：

<input type='checkbox' data-toggle='checkAll' data-target='.check-option' /> check all
<input type='checkbox' class='check-option' value='1' /> option 1
<input type='checkbox' class='check-option' value='2' /> option 2

<input type='checkbox' data-toggle='checkAll' data-target='.check-option2' /> check all 2
<input type='checkbox' class='check-option2' value='1' /> option 1
<input type='checkbox' class='check-option2' value='2' /> option 2

【讨论】：

【解决方案2】：

    <ul>
      <li><label>item-1</label><input name="checkbox-1" id="checkbox-1" type="checkbox" class="checkitem" /></li> 
      <li><label>item-1</label><input name="checkbox-2" id="checkbox-2" type="checkbox" class="checkitem"  /></li> 
      <li><label>item-1</label><input name="checkbox-3" id="checkbox-3" type="checkbox" class="checkitem"  /></li> 
      <li><label>item-1</label><input name="checkbox-4" id="checkbox-4" type="checkbox" class="checkitem"  /></li> 
    </ul>
    <input type="checkbox" name="select-all" id="select-all" /> Check all

    <script>
    $(document).ready(function() {
        $('#select-all').click(function(event) {  
            if(this.checked) { 
                $('.checkitem').each(function() { 
                    this.checked = true;     
                });
            }else{
                $('.checkitem').each(function() {
                    this.checked = false; 
                });        
            }
        });

    });
    </script>

http://jsfiddle.net/9o3f01e0/

【讨论】：

【解决方案3】：

[这是我制作的小提琴][1]

在页面底部添加脚本

[1]: http://jsfiddle.net/zbjc0fpe/1/

【讨论】：

对不起，我想，你只想做检查。让我更新小提琴

【解决方案4】：

试试这样的。

$('#select-all').click(function(event) {
   var checked = this.checked; 
   $("input[type=checkbox]").each(function(){
     $(this).prop('checked', checked);
   });
});

【讨论】：