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实现全选反选的主要内容,如果未能解决你的问题,请参考以下文章

Vue实现单选、全选和反选

Layui table中筛选列增加 [全选,反选] 功能【转】

js实现全选反选

js 判断 复选框全选全不选反选必选一个

js 脚本怎样实现checkbox的全选,反选,类似邮箱中邮件的全选后删除移动

js实现多选全选反选取消选择(篇一)