JQuey中 attr('checked', true)设置状态只有第一次有用

用prop()

在jQuery中可以使用attr()来访问对象的属性，但是在某些时候，比如访问input的disabled属性的时候，会有些问题。在有的浏览器中，只要写了disabled属性就可以，有的则要写：disabled="disabled"。所以jquery提供了新的方法prop()来获取这些属性，使用prop()的时候，返回值是标准属性：true/false，不会回返“disabled”或者“”。那么，那些属性应该使用attr()访问，哪些应该用prop()访问呢？

第一个原则：只添加属性名称该属性就会生效的应该使用prop()；

第二个原则：只存在true/false的属性应该使用prop()。

像如果是设置disabled或者checked这些属性，应该使用prop()方法，而不是使用attr()方法。

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复选框应用</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
<style>
.checkbox{
border: 1px solid #A9A9A9;
margin: 10px auto;
padding: 10px 10px;
}
</style>
<script>
$(function(){
//全选
$("#CheckedAll").click(function(){
//$("[name=items]:checkbox").attr('checked',true);//只有第一次生效
$("[name=items]:checkbox").prop('checked',true);//只有第一次生效
});
//全不选
$("#CheckedNo").click(function(){
//$("[name=items]:checkbox").attr('checked',false);//只有第一次生效
$("[name=items]:checkbox").prop('checked',false);
});
//反选
$("#CheckedRev").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked=!this.checked;
})
});
//提交
$("#send").click(function(){
var str="你选中的是： ";
$("[name=items]:checked").each(function(){
str+=$(this).val()+" ";
})
alert(str);
});
//全选/全不选
$("#CheckedAN").click(function(){
$("[name=items]:checkbox").prop("checked",this.checked);
})
//当复选框取消某一个选项的选中状态是时，全选/全不选需要取消选中状态
$("[name=items]:checkbox").click(function(){
var tmp=$("[name=items]:checkbox");
$("#CheckedAN").prop("checked",tmp.length==tmp.filter(":checked").length);
})
})
</script>
</head>
<body>
<form action="#" method="post" id="regForm">
<fieldset>
<legend>复选框应用</legend>
<div class="checkbox">
你爱好的运动是？
<input type="checkbox" id="CheckedAN" value="全选/全不选"/>全选/全不选
<br />
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="CheckedAll" value="全选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反选" />
<input type="button" id="send" value="提交" />
</div>
</fieldset>
</form>
</body>
</html>