jQuery checkbox bug（第一次能选中生效，第二次失效）

最新推荐文章于 2021-08-05 18:30:27 发布

zosoyi

最新推荐文章于 2021-08-05 18:30:27 发布

阅读量3.3k

点赞数 3

分类专栏： javascript 文章标签： jquery

本文链接：https://blog.csdn.net/zosoyi/article/details/78474946

版权

博客详细描述了使用jQuery操作checkbox时遇到的问题，即第一次点击label可以切换checkbox状态，但第二次点击则失效。问题源于从jQuery 1.6开始，`attr()`方法不再适合用于获取或设置某些属性，特别是boolean attributes。解决方案是使用`.prop()`方法来正确地处理checkbox的checked状态。官方文档指出，`attr()`与`prop()`的区别在于，`prop()`更适合处理如checked这样的属性。

摘要由CSDN通过智能技术生成

1.问题描述

想实现一个效果，当label被点击时，checkbox就切换checked的状态。代码如下

<div class="pillCheckbox">
    <input type="checkbox" value="1">
    <label for="pillCheckbox"></label>                      
</div>

原js代码：

//.maskContent是外部div大框，上面html省略
$('.maskContent').delegate('.pillCheckbox>label','click',function(){
   
    $(this).toggleClass('checked');
    if($(this).hasClass('checked')){
       $(this).siblings('input').attr('checked','checked');
    }else{
       $(this).siblings(