jq实现多选框及反选

1 效果图

2 html

<div class="main">

<table>

<tr>

<th><input type="checkbox" id="checkAll" name="checkAll"/><label>全选</label><label>

<a href="#" id="checkNo">反选</a>

</label></th>

</tr>

<tr>

  <td><input type="checkbox" name="item" /><label>选项1</label></td>

</tr>

<tr>

  <td><input type="checkbox" name="item" /><label>选项2</label></td>

</tr>

<tr>

  <td><input type="checkbox" name="item" /><label>选项3</label></td>

</tr>

<tr>

  <td><input type="checkbox" name="item" /><label>选项4</label></td>

</tr>

<tr>

  <td><input type="checkbox" name="item" /><label>选项5</label></td>

</tr><tr>

  <td><input type="checkbox" name="item" /><label>选项6</label></td>

</tr>

</table>

</div>

3 css

.main{

  height:200px;

  background-color:#CDCDC1;

  font-size:15px;

  font-family:"微软雅黑";

}

4 jq

$(document).ready(function(){

    //判断子元素是否全选

    var length = $("input[name='item']").length;

    function isCheckAll(){

    var count = 0;

    for(let i =0;i<length;i++){

    if($("input[name='item']").eq(i).prop('checked')){

    count++;

    }

    }

    if(count == length){$("input[name='checkAll']").eq(0).prop('checked',true);}else{

    $("input[name='checkAll']").eq(0).prop('checked',false);

    }

    }

    //全选

   $("input[name='checkAll']").click(function(){

   var _this_ = $(this);

   $("input[name='item']").prop('checked',_this_.prop('checked'));

   })

   //反选

  $("#checkNo").click(function(){

      $("input[name='item']").each(function(){

          $(this).prop('checked',!$(this).prop('checked'));

      });

      isCheckAll();

  })

  //为每一个选项绑定一个判断全选le

  for(let i=0;i<length;i++){

  $("input[name='item']").eq(i).click(function(){

  isCheckAll();

  })

  }

});

5 总结

.prop(); //可以用来获取属性值，也可以用来设置属性值，与.attr()类似

.each()；//为选中的对象集合的元素遍历一遍处理函数

.length；//获取选中对象的个数

6 补充 js实现 2019/10/16,思路不变，只是用原生的js实现

window.onload = function(){

  var oCheckAll = document.getElementsByName('checkAll');

  var oCheckNo = document.getElementById('checkNo');

  var oItem = document.getElementsByName('item');

  var length = oItem.length;

  console.log(length);

  console.log(oItem);

  function isCheckedAll(){

    let count = 0;

    for(let i =0;i<length;i++){

      if(oItem[i].checked == true){

        count++;

      }

    }

    if(count == length){

      oCheckAll[0].checked = true ;

    }else{

      oCheckAll[0].checked = false ;

    }

  }

  oCheckAll[0].onclick = function(){

    console.log(1);

    for(let i=0;i<length;i++){

      oItem[i].checked = true;

    }

  }

  oCheckNo.onclick = function(){

    console.log(2);

    for(let i=0;i<length;i++){

      var flag = oItem[i].checked;

      oItem[i].checked = !flag;

    }

    isCheckedAll()

  }

  for(let i =0;i<length;i++){

    oItem[i].onclick = function(){

      isCheckedAll();

    }

  }

}

巴特西

jq实现多选框及反选

最新文章

热门文章