如何用jQuery实现checkbox全选

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用jQuery实现checkbox全选相关的知识，希望对你有一定的参考价值。

有2个button，
第一个，点击一次实现页面中checkbox全选，再点击一次全部取消。
第二个，点击一次实现页面中checkbox反选。
用jquery如何实现？求助大神们

全选：

$(":checkbox").attr("checked","checked");

全不选：

$(":checkbox").removeAttr("checked");

 

反选：

$(":checkbox:checked").removeAttr("checked");

$(":checkbox:not(:checked)").attr("checked","checked");

 

全手写，没有经过测试。

 

完整代码如下，测试通过：

<html>
<head>
    <title>如何用jQuery实现checkbox全选</title>
    <script src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        //全选，全不选
        function allSelect() 
            if ($(":checkbox").attr("checked") != "checked") 
                $(":checkbox").attr("checked", "checked");
            
            else 
                $(":checkbox").removeAttr("checked");
            
        
        //反选
        function otherSelect() 
            $(":checkbox").each(function () 
                if ($(this).attr("checked") == "checked") 
                    $(this).removeAttr("checked");
                
                else 
                    $(this).attr("checked", "checked");
                
            );
        
    </script>
</head>
<body>
    <input id="Checkbox1" type="checkbox" />
    <input id="Checkbox2" type="checkbox" />
    <input id="Checkbox3" type="checkbox" />
    <input id="Checkbox4" type="checkbox" />
    <input id="Checkbox5" type="checkbox" />
    <input id="Button1" type="button" value="全选" onclick="allSelect();" />
    <input id="Button3" type="button" value="反选" onclick="otherSelect();" />
</body>
</html>

追问

$('#select_all').click(function () //全选
$(":checkbox").attr("checked","checked");
);
select all
这样写，无法实现哪里有问题呢？

追答

没有问题，可以全选，加载时注册：
//加载时注册事件
$(function()

$('#select_all').click(function () //全选
$(":checkbox").attr("checked", "checked");
);
);

 参考技术A

全选：

&#36;(":checkbox").attr("checked","checked");

$("#selectAll").click(function()

if($(this).attr("checked"))

$("input:checkbox").attr("checked","checked");

else

$("input:checkbox").removeAttr("checked");

);

 参考技术B <script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function()
    $(':button').toggle(function()
        $(':checkbox').attr('checked',"checked");
    ,function()
        $(':checkbox').removeAttr('checked');
    )

)
</script>

就用这个就可以了

JQuery实现的 checkbox 全选反选。

 

1. 全选的checkbox选中时，子checkbox全部选中。反之，全部不选

2.子checkbox中，只要有没有被选中的，取消全选checkbox的选中

3.子checkbox的数量和子checkbox被选中的数量一样时，全选checkbox要被选中

[javascript] view plain copy
 
  1. //复选框事件  
  2. //全选、取消全选的事件  
  3. function selectAll(){  
  4.     if ($("#SelectAll").attr("checked")) {  
  5.         $("input[name=‘subcheck‘]").attr("checked", true);  
  6.     } else {  
  7.         $(":checkbox").attr("checked", false);  
  8.     }  
  9. }  
  10. //子复选框的事件  
  11. function setSelectAll(){  
  12.     //当没有选中某个子复选框时，SelectAll取消选中  
  13.     if (!$("#subcheck").checked) {  
  14.         $("#SelectAll").attr("checked", false);  
  15.     }  
  16.     var chsub = $("input[type=‘checkbox‘][name=‘subcheck‘]").length; //获取subcheck的个数  
  17.     var checkedsub = $("input[type=‘checkbox‘][name=‘subcheck‘]:checked").length; //获取选中的subcheck的个数  
  18.     if (checkedsub == chsub) {  
  19.         $("#SelectAll").attr("checked", true);  
  20.     }  else{
  21.         $("#SelectAll").attr("checked", false);}
  22. }  

全选checkbox的id是SelectAll，子checkbox的name是subcheck.

 

JSP页面代码如下：

 

[html] view plain copy
 
  1. <input type="checkbox" id="SelectAll"  value="全选" onclick="selectAll();"/>  
  2.   
  3. <input type="checkbox" name="subcheck[]"  value="1" onclick="setSelectAll();"/>  
  4. <input type="checkbox" name="subcheck[]"  value="2" onclick="setSelectAll();"/>  
  5. <input type="checkbox" name="subcheck[]"  value="3" onclick="setSelectAll();"/>  
  6. <input type="checkbox" name="subcheck[]"  value="4" onclick="setSelectAll();"/>  

 

 

以上是关于如何用jQuery实现checkbox全选的主要内容，如果未能解决你的问题，请参考以下文章

jQuery和js使用点滴

jquery控制checkbox

如何用JS实现多选框select的全选和取消全选

使用el-checkbox实现全选，点击失效没有反应

jQuery模糊匹配checkbox全选 value实现checkbox部分或全部全选

JQuery实现的 checkbox 全选反选。