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;
        }
    })

  • 相关阅读:
    idea的常识
    开发工具
    常用的正则表达式
    比较器
    索引
    final区别
    GC
    String StringBuffer
    类库
    线程的操作状态
  • 原文地址:https://www.cnblogs.com/Yzzzzzzzzz/p/9403617.html
Copyright © 2011-2022 走看看