前端Checkbox中的细节

选择器

// checkbox不同的选择方式   
$(":checkbox");
$("[type=checkbox]");
$("[type=checkbox]:checked");
$(":checkbox:not(:checked)");

判断选中

// 判断checkbox是否被选择   
$(":checkbox").is(":checked");
$(":checkbox").prop("checked");

改变状态

// 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的详细对比在这里有所以, 以下两种写法并不一定会获取或设置选中状态

$(":checkbox").attr("checked");
$(":checkbox").attr("checked","checked");