//两个全选框实现子框的全部选中或取消
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function()
{
//因为有两个allcheck选项框,判断它们的长度,只要长度大于1,就全选中,长度小于1就全取消
$(".allcheck").click(function(){
//判断checkall的属性checked的值是否是checked。
//如果是所有的选项框都打上对号
//如果不是,将所有的选项框的对号清空
if($(".allcheck").prop("checked")==true)
{
$("input:checkbox").prop("checked",true);
$("input:checkbox").attr("checked","checked");
}
else
{
$("input:checkbox").prop("checked",false);
$("input:checkbox").removeAttr("checked");
}
});
$(".allcheck1").bind({
change:function(){
if($(".allcheck1").prop("checked")==true)
{
$("input:checkbox").prop("checked",true);
$("input:checkbox").attr("checked","checked");
}
else
{
$("input:checkbox").prop("checked",false);
$("input:checkbox").removeAttr("checked");
}
}
});
//如果清空子选项框的对号,则将全选选项框的对号清空。
$(".checkcell").bind({
change:function(){
$(".checkcell").each(function()//遍历每个.checkcell的checkbox
{
if($(this).prop("checked")==false)//如果checkcell取消选中
{
$(this).removeAttr("checked");//先删除它的checked属性,便于统计被选中的checkcell
$(".allcheck").removeAttr("checked");
$(".allcheck1").removeAttr("checked");
}
else
{
$(this).prop("checked",true);//如果checkcell被选中,页面显示选中
$(this).attr("checked","checked");//checked属性值设置为checked
}
});
var checkedLength=$(".checkcell[checked='checked']").length;//attr方法赋值checked都为计算出子checkbox的长度
var subLength=$(".checkcell").length;
//如果所有的子checkbox个数不等于选中的checkbox的个数,就取消全选框的对号
if(subLength!=checkedLength)
{
$(".allcheck").prop("checked",false);
$(".allcheck1").prop("checked",false);
}
else
{//如果所有的子checkbox被选中,全选框也全选中
$(".allcheck").attr("checked","checked");
$(".allcheck").prop("checked",true);
$(".allcheck1").attr("checked","checked");
$(".allcheck1").prop("checked",true);
}
}
});
});
</script>
这里为什么已经用prop还要用attr呢?
我发现用prop方法只能让checkbox在页面上动态的显示选中或不选中,但是在代码中仍然没有对checked属性进行修改。所以当在页面上显示checkbox被选中时,我就用attr在代码将checked的属性值赋值为checked,这样就能很容易计算出被选中的子checkbox被选中的个数。
这种方法感觉很繁琐~~