jquery的attr和removeAttr实现checkbox全选和取消全选问题

wj振藩

于 2018-01-12 17:00:06 发布

阅读量2.1k

点赞数

分类专栏： jquery/js

本文链接：https://blog.youkuaiyun.com/qq_25652949/article/details/79046094

版权

jquery/js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个全选和取消全选功能的问题及其解决方案。在使用JQuery的attr和removeAttr方法时，出现全选功能失效的情况。通过更换为prop方法，解决了checkbox状态更新不显示的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery的attr和removeAttr实现checkbox全选和取消全选问题

问题说明：
一个全选和取消全选的功能，界面效果图如下
这里写图片描述
点击全选checkbox则所有checkbox被选中或者取消选中
用到Jquery的attr(“checked”,true)和removeAttr(“checked”)方法
这个时候出现了问题，在第一次选中和取消时成功
第三次点击时则不能实现全选或取消全选
F12调试查看html代码

这里写图片描述
选中全选按钮后其它checkbox的checked属性是checked，但是显示还是未选中
解决方法
将attr属性设置方法换成prop特性设置方法
原js代码

$("#th-checkbox").bind("click",function(){
        if($("#th-checkbox").is(':checked')){
                $("[name='checkbox']").attr(checked",true);
            }
        if(!$("#th-checkbox").is(':checked')){
                $("[name='checkbox']").removeAttr("checked");
            }
    });

修改后js

$("#th-checkbox").bind("click",function(){
        if($("#th-checkbox").is(':checked')){
                $("[name='checkbox']").prop("checked",true);
            }
        if(!$("#th-checkbox").is(':checked')){
                $("[name='checkbox']").removeAttr("checked");
            }
    });