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

来源：互联网发布：ubuntu mysql自启动编辑：程序博客网时间：2024/04/30 03:04

//两个全选框实现子框的全部选中或取消<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被选中的个数。

这种方法感觉很繁琐~~

0 0