JQuery一个checkbox实现全选/全不选,取消子checkbox时,全选checkbox取消对号

时间:2022-03-01 03:06:34
//两个全选框实现子框的全部选中或取消
<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>

JQuery一个checkbox实现全选/全不选,取消子checkbox时,全选checkbox取消对号


这里为什么已经用prop还要用attr呢?

我发现用prop方法只能让checkbox在页面上动态的显示选中或不选中,但是在代码中仍然没有对checked属性进行修改。所以当在页面上显示checkbox被选中时,我就用attr在代码将checked的属性值赋值为checked,这样就能很容易计算出被选中的子checkbox被选中的个数。

这种方法感觉很繁琐~~