解决jQuery操作checkbox第二次失效的问题

最新推荐文章于 2021-08-02 14:08:46 发布

原创最新推荐文章于 2021-08-02 14:08:46 发布 · 4.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #checkbox #全选 #反选 #全不选

jQuery 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个使用jQuery实现全选、全不选及反选功能的示例，并解决了因jQuery版本不同导致的问题。通过替换$.attr为$.prop解决了复选框状态设置问题。

直接上代码：

<html>
    <head>
        <script src="jquery.js"></script>
        <script>

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

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

                });
                $("#selectNo").click(function(){
                    $(":checkbox").attr("checked",false);
                });
                $("#selectInverse").click(function(){
                    $(":checkbox").each(function(){
                        $(this).attr("checked",!$(this).attr("checked"));
                    })
                });
            });

        </script>
    </head>
    <body>
        足球<input type="checkbox" name="items" value="足球" >
        蓝球<input type="checkbox" name="items" value="蓝球">
        排球<input type="checkbox" name="items" value="排球">
        羽毛球<input type="checkbox" name="items" value="羽毛球">
        <input type="button" id="selectAll" value="全选" onclick="selectAll()">
        <input type="button" id="selectNo" value="全不选">
        <input type="button" id="selectInverse" value="反选">
    </body>

</html>

问题：第一次点击可以出现想要的结果，可是第二次点击全选，则再也没有选中。

根源：jQuery版本的问题。对于$(“**”).attr(“attrName”)，jQuery API明确说明，1.6+的jQuery要用prop，尤其是checkBox的checked的属性的判断。所以将代码更改如下即可解决问题。

<script>

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

                        $(":checkbox").prop("checked",true);

                });
                $("#selectNo").click(function(){
                    $(":checkbox").prop("checked",false);
                });
                $("#selectInverse").click(function(){
                    $(":checkbox").each(function(){
                        $(this).prop("checked",!$(this).prop("checked"));
                    })
                });
            });

</script>