码迷,mamicode.com
首页 > 其他好文 > 详细

jq实现多选框及反选

时间:2019-10-12 20:55:35      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:选项   com   round   div   图片   个数   技术   function   tab   

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;//获取选中对象的个数

jq实现多选框及反选

标签:选项   com   round   div   图片   个数   技术   function   tab   

原文地址:https://www.cnblogs.com/Zxq-zn/p/11663050.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!