jQuery中attr()解决checked属性问题
这两天在做一个表单提交，其中就包含有checkbox的全选和反选，这是最先开始做出来的版本，代码如下：
<input id="checkAll" type="checkbox" />全选
<input name="subBox" type="checkbox" />Php
<input name="subBox" type="checkbox" />Java
<input name="subBox" type="checkbox" />NodeJS
<input name="subBox" type="checkbox" />Python
<script>
$(document).ready(function(){
$("#checkAll").click(function() {
//console.log($(this).attr("checked"));
//console.log($(this).is(":checked"))
if($(this).attr("checked")){
$('input[name="subBox"]').attr("checked",true);
}else{
$('input[name="subBox"]').attr("checked",false);
}
});
});
</script>
点击发现一点反应也没有，到网上搜了一下，发现attr()获取到的值就没变过，而is(":checked")会随着点击变化，就把if条件修改成了if($(this).is(":checked")),发现终于可以了，全选可以，取消全选也可以，但又出现了一个新的问题，只能点击一次，点击一次之后就没有全选反选的效果了，太奇怪了，这什么问题！！！
再去搜，发现了一个的东西，prop()这个东东，原来jQuery自从1.6之后就有了它，attr()太混乱，为了区分，就出现了prop()，对于checked，若是prop()获取的则是浏览器对于当前变化着的值，即随着点击变化而变化，而attr()则是浏览器记录checked的初始值，即它的默认值，不会随着改变而改变，然后试了试新的方法，如下：
<script>
$(document).ready(function(){
$("#checkAll").click(function() {
if($(this).prop("checked")){
$('input[name="subBox"]').prop("checked",true);
}else{
$('input[name="subBox"]').prop("checked",false);
}
});
//or
var isChecked = $(this).prop("checked");
$("input[name='subBox']").prop("checked", isChecked);
});
</script>
然后你就可以随意的切换全选反选啦！