js实现全选反选
Posted Cynthia-milk
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现全选反选相关的知识,希望对你有一定的参考价值。
在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考。
这里呢就先贴上我的html和css代码
<div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="theadInp" /> </th> <th>快递</th> <th>收件人</th> <th>电话</th> </tr> </thead> <tbody id="tbody"> <tr> <td> <input type="checkbox" /> </td> <td>顺丰</td> <td>张大大</td> <td>186*****897 </tr> <tr> <td> <input type="checkbox" /> </td> <td>韵达</td> <td>张全蛋</td> <td>186*****897 </tr> <tr> <td> <input type="checkbox" /> </td> <td>圆通</td> <td>韩非</td> <td>186*****897 </tr> <tr> <td> <input type="checkbox" /> </td> <td>中国邮政</td> <td>卫庄</td> <td>186*****897 </tr> </tbody> </table> </div>
这是html部分的,下面呢,我附上css部分的代码:
* { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color:rgb(51, 199, 18); font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; }
展示出来的布局是这样的:
好了,下面我们就开始讲重点把,做之前的呢,一定要理清思路,只有理清思路的才能好下手做啊
我们要通过点击第一个input标签来改变所有input标签的选择状态,
1.首先要获取到控制总选择状态的input标签,我们命名为inputAll
2.然后把每个input标签存到一个数组中去,我们命名为icheck
3.点击inputAll来改变状态,并且让icheck里面的input能跟着他的状态来变化
代码如下:
window.onload = function() { //先获得控制全选反选的input标签 var inputAll = document.getElementById("theadInp"); //获得tbody var tbody = document.getElementById("tbody"); //获得天tbody里面的子元素 var icheck = tbody.getElementsByTagName("input"); console.log(icheck); //给控制全选反选的input标签绑定事件 inputAll.onclick = function() { //遍历tbody里面的input标签,把inputAll的状态赋值给icheck for(var i = 0; i < icheck.length; i++) { icheck[i].checked = this.checked; } }
上面都有写注释,大家肯定都能看的懂的,也没难点,就不需要解释了。
看下面:
以为这样就结束了事了吗?然而并没有。里面还是有个小问题的,就是当下面的input有一个以上没选中的时候,那么inputAll的状态也必须要跟着变化,总不能只让人家听他一个人的话吧,这就太不像话了。
for(var i = 0; i < icheck.length; i++) { //给每个子元素都绑定事件 icheck[i].onclick = function() { //点击的时候在遍历icheck,看看是否有没选中的 for(var j = 0; j < icheck.length; j++) { //定义一个标志来记录 var flag = true; if(icheck[j].checked == false) { flag = false; } } inputAll.checked=flag; } }
jq实现方法:
是不是觉得js实现起来特别的繁琐,没关系,我们有更加简单的实现办法,那就jq来实现
$(function() { //实现全选反选 $("#theadInp").on(\'click\', function() { $("tbody input:checkbox").prop("checked", $(this).prop(\'checked\')); }) $("tbody input:checkbox").on(\'click\', function() { //当选中的长度等于checkbox的长度的时候,就让控制全选反选的checkbox设置为选中,否则就为未选中 if($("tbody input:checkbox").length === $("tbody input:checked").length) { $("#theadInp").prop("checked", true); } else { $("#theadInp").prop("checked", false); } }) })
看,jq方法是不是简单的太多了,所以呢,能用jq就别人js实现了
以上是关于js实现全选反选的主要内容,如果未能解决你的问题,请参考以下文章
Layui table中筛选列增加 [全选,反选] 功能【转】