zoukankan      html  css  js  c++  java
  • jquery实现多选、全选、全不选

    实现的效果    1.当点击1时,2、3也选中

             2.当1为不选中时,2、3也不被选中

             3.点击1后,2、3全选,然后将2设为不选中,1也不被选中。   当再次将2选中时,1也被选中

    HTML      <input type="checkbox" name="allCheckBox" />

         <br/>

          <input type="checkbox" name="checkbox" />

           <input type="checkbox" name="checkbox" />

          <input type="checkbox" name="checkbox" />

    JS

      

    //判断全选 或者 全不选
    $('input[name="allCheckBox"]').click(function(){
      if($(this).is(':checked')){
        $('input[name="checkbox"]').each(function(){
          //此处如果用attr,会出现第三次失效的情况
          $(this).prop("checked",true);
        });
      }else{
        $('input[name="checkbox"]').each(function(){
          $(this).removeAttr("checked",false);
        });
      }
    });

    //判断当全选时 若有一个不选 全选按钮为不选状态
    $('input[name="checkbox"]').click(function(){
      var checkedLength = $("input[name='checkbox']:checked").length;
      var checkLength = $("input[name='checkbox']").length;
      if(checkLength == checkedLength){
          $("input[name='allCheckBox']").prop("checked",true);
          return true;
        }else{
          $("input[name='allCheckBox']").prop("checked",false);
          return true;
        }
    })

  • 相关阅读:
    java09 队列Queue与Deque
    java08 Set
    java07 map
    SNMP学习
    NPM
    windows主机资源Snmp OIDs CPU, Memory, Disk等
    servlet3.0 @webfilter 过滤顺序
    snmp v3的安全配置 snmp认证与加密配置(53)
    CentOS 7.2 (mini) 里iptables防火墙怎么关闭?
    ORA-00845 MEMORY_TARGET not supported on this system 的解决
  • 原文地址:https://www.cnblogs.com/Yzzzzzzzzz/p/9403617.html
Copyright © 2011-2022 走看看