前端Checkbox中的细节
选择器
js
// checkbox不同的选择方式
$(":checkbox");
$("[type=checkbox]");
$("[type=checkbox]:checked");
$(":checkbox:not(:checked)");
判断选中
js
// 判断checkbox是否被选择
$(":checkbox").is(":checked");
$(":checkbox").prop("checked");
改变状态
js
// jQuery操作checkbox
$(":checkbox").prop("checked",true);
$(":checkbox").click();
$(":checkbox").trigger('click');
$(":checkbox:checked").removeAttr('checked');
小知识
jquery1.6版本便对attr()做出了修改,并增加了prop()
attr在某些情况下无效的原因
- attr表示Html的attribute, 而prop表示DOM中的对象属性,即property;
- attr的数据类型是string, 而prop可以表示boolean和object等任何类型;
- prop的更新一定导致attr更新, attr更新不一定导致prop更新,如checked和value;
- 而attr在remove原型对象时会出错, 而prop会忽略这个错误
关于attr和prop的详细对比在这里有所以, 以下两种写法并不一定会获取或设置选中状态
js
$(":checkbox").attr("checked");
$(":checkbox").attr("checked","checked");