用jquery实现复选框全选按钮的操作

<input type="checkbox" name="selectAll" class="xk_all" 
style="width:18px;height:18px;vertical-align:middle;margin-top:-4px;" />
<span class="zt_all" style="font-size:18px;height:30px;line-height:30px;">
&nbsp;&nbsp;全选
</span>
<hr />
<label style="height:50px;width:200px;padding:15px;">
<input id="cxzsl" type="checkbox" name="select" class="xk"
value="0" checked="checked"
style="width:18px;height:18px;vertical-align:middle;margin-top:-4px;" />
<span class="zt" style="font-size:18px;height:30px;line-height:30px;">
&nbsp;&nbsp;0
</span>
</label>
<label style="height:50px;width:200px;padding:15px;">
<input id="cxzsl" type="checkbox" name="select" class="xk"
value="1" checked="checked"
style="width:18px;height:18px;vertical-align:middle;margin-top:-4px;" />
<span class="zt" style="font-size:18px;height:30px;line-height:30px;">
&nbsp;&nbsp;1
</span>
</label>
<label style="height:50px;width:200px;padding:15px;">
<input id="cxzsl" type="checkbox" name="select" class="xk"
value="2" checked="checked"
style="width:18px;height:18px;vertical-align:middle;margin-top:-4px;" />
<span class="zt" style="font-size:18px;height:30px;line-height:30px;">
&nbsp;&nbsp;2
</span>
</label>
<label style="height:50px;width:200px;padding:15px;">
<input id="cxzsl" type="checkbox" name="select" class="xk"
value="3" checked="checked"
style="width:18px;height:18px;vertical-align:middle;margin-top:-4px;" />
<span class="zt" style="font-size:18px;height:30px;line-height:30px;">
&nbsp;&nbsp;3
</span>
</label>
<label style="height:50px;width:200px;padding:15px;">
<input id="cxzsl" type="checkbox" name="select" class="xk"
value="4" checked="checked"
style="width:18px;height:18px;vertical-align:middle;margin-top:-4px;" />
<span class="zt" style="font-size:18px;height:30px;line-height:30px;">
&nbsp;&nbsp;4
</span>
</label>




<script>
$(function(){ 
//页面初始加载时判断单个复选框是否都选中：若选中全选框默认选中，反之
var allSel = false;
var select = document.getElementsByName("select");
var objArray = select.length;
alert("展示列"+objArray);
for(var i=0;i<objArray;i++){ 
            if(select[i].checked == true){  
                allSel = true;
            } else{
            allSel = false;
            break;
            }  
        } 
        if(allSel){
$(".xk_all").attr("checked","checked");
}  
});

//设置全选框点击事件
$(".xk_all").click(function(){
alert("进入1");
alert("$(this).is(':checked')"+$(this).is(':checked'));
if($(this).is(':checked')){
alert("进入2");
//attr("checked",true)只能执行一次
//$("input[name='select']").attr("checked","checked");
//prop("checked",true)能执行多次
 $("input[name='select']").prop('checked',true);
}else{
alert("进入3");
//$(".xk").removeAttr("checked");
$("input[name='select']").prop('checked',false);
}
})

//给单个复选框设置点击事件
$(".xk").click(function(){
var allSel = false;
$("input[name='select']").each(function(){
if(!$(this).is(':checked')){
allSel = true;
}
})
//如果有复选框没有被选中
if(allSel){
$("input[name='selectAll']").prop('checked',false);
}else{
$("input[name='selectAll']").prop('checked',true);
}
})

</script>