总结:
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
<script type="text/javascript">
$("#chooseall").click(function(){
// 使用attr只能执行一次
var isChecked1 = $(this).attr("checked");
$("input[name='list[]']").attr("checked" , isChecked1);
// 使用prop则完美实现全选和反选
var isChecked2 = $(this).attr("checked");
$("input[name='list[]']").prop("checked", isChecked2);
$("input[name='list[]']").prop("checked",this.checked);
// 获取所有选中的项并把选中项的文本组成一个字符串
var str = '';
$("input[name='list[]']:checked").each(function(){
str += $(this).next().text() + ',';
});
alert(str);
});
</script>
<script type="text/javascript">
$(function(){
var $choose = $("#choose input");
//全选
$("#all").click(function(){
$choose.each(function(){
$(this).prop("checked",true);
});
});
//全不选
$("#not").click(function(){
$choose.prop("checked",false);
});
//反选
$("#reverse").click(function(){
$choose.each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
});
//简洁的反选操作
$("#CheckRev").click(function(){
$("[name=items]:checkbox").each(function(){
this.chekced = !this.checked;
});
});
// 全选\全不选
$("#CheckAll").click(function(){
$("[name=item]:checkbox").prop("checked",this.checked);
});
//根据长度值,复选框联动
$("[name=itmes]:checkbox").click(function(){
//定义一个临时变量,避免重复使用同一个选择器选择页面中的元素,提高程序效率
var $tmp = $("[name=items]:checkbox");
//用filter()方法筛选出选中的复选框,并直接给CheckedAll赋值
$("#CheckedAll").prop("checked",$temp.length == $temp.filter(':checked').length);
});
});
</script>