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

时间：2025-04-02 08:59:27

直接上代码：

<html>
    <head>
        <script src=""></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>

相关文章