首页 » 网站建设 » 前端 » 正文

jQuery中复选框(checkbox) checked 正确操作方法

在做全选按钮时,需要使列表中所有checkbox的属性checked为true,然后再次单击又全不选。
在这里犯了个错误:
if($(this).attr("checked")){
$(this).parent().parent().parent().find("input[id^='choose']").removeAttr("checked");
console.log('移除checked');
}
else{
console.log('添加checked');
$(this).parent().parent().parent().find("input[id^='choose']").attr("checked","checked");
}

这样,第一次全选/全不选有效,之后再点就无效了,审查元素看到属性有正确更新。
后来查阅资料发现,问题应该在于我使用到了removeAttr,而不是采用官方的正确方法:
$('obj').attr('checked',true);
$('obj').prop('checked',true);
$('obj').attr('checked',false);
$('obj').prop('checked',false);

最后采用了一句话搞定:
$(this).parent().parent().parent().find("input[id^='choose']").prop('checked', $(this).prop('checked'));

参考:
https://api.jquery.com/attr/
http://www.oschina.net/code/snippet_86510_2781
http://stackoverflow.com/questions/5270689/attrchecked-checked-does-not-work

发表评论