检查/取消选中jQuery中的所有复选框

我没有足够的关于jQuery的知识，我需要一个名为“全选”的复选框。当我选择此复选框时，必须选择HTML页面中的所有复选框。我怎样才能做到这一点？检查/取消选中jQuery中的所有复选框

我使用下面的代码，但它并没有正常工作：

下载压缩，生产的jQuery 2.1.1：

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

我从打击环节已经下载JQ

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

来源

2014-11-14 S.M_Emamian

您没有绑定任何事件，因为在处理代码时，DOM中没有元素。使用例如文档准备好处理程序 – 2014-11-14 20:10:44

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

来源

2014-11-14 20:26:47

尝试这样的事情。

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

来源

2014-11-14 20:20:56 ianaya89

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

在

页面底部的添加脚本

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

来源

2014-11-14 20:21:25

取消选中复选框无法正常工作！ – 2014-11-14 20:23:53

对不起，我想，你只想做检查。让我更新小提琴 – 2014-11-15 17:24:18

这里是小提琴http://jsfiddle.net/zbjc0fpe/3/ – 2014-11-15 17:25:57

只是为了笑容和笑声。 ..其他答案的工作发现，但我喜欢以下方法的简洁性和可重用性...所以以防万一这可以帮助任何人：

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

使用上面的脚本，只要你想，你可以在网页上有许多“checkAll”复选框......每一个“检查所有”复选框只需要指定不同的目标选择：

<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

来源

2014-11-14 21:17:09

检查/取消选中jQuery中的所有复选框

回答

相关问题