全选反选和取消

最新推荐文章于 2023-04-23 23:25:17 发布

淤泥深处捡星星~

最新推荐文章于 2023-04-23 23:25:17 发布

阅读量237

点赞数

分类专栏：前端文章标签： js 前端

本文链接：https://blog.csdn.net/m0_54597014/article/details/117567636

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实现效果：

1、用复选框来做，先搭建出大致框架（这部分可看可不看，重要的是js部分）

<body>
    <div class="box">
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" id="j_cbAll"></input></th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox"></input>
                    </td>
                    <td>iphone</td>
                    <td>ipad</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"></input>
                    </td>
                    <td>iphone</td>
                    <td>ipad</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"></input>
                    </td>
                    <td>iphone</td>
                    <td>ipad</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"></input>
                    </td>
                    <td>iphone</td>
                    <td>ipad</td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="取消" id="cancel" />
        <input type="button" value="反选" id="reserve" />
    </div>

2、分别实现全选，取消和反选的功能，全选要注意每一个按钮点击以后都要判断是不是都选中了（细节见注释）

<script>
        // 1获取元素
        var j_cbAll = document.getElementById('j_cbAll');
        var cancel = document.getElementById('cancel');
        var reserve = document.getElementById('reserve');
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
        //上面全选按钮一按下面就全部被选
        j_cbAll.onclick = function () {
            // this.checked可以得到当前复选框的选中状态，选中为true，未选中为false
            console.log(this.checked);
            for (var i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked;
            }
        }
        //给每个小按钮都要绑定事件，每个按钮触发都要检查是不是所有的都勾选了
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function () {
                // flag是记录状态的标记，只有true或者false或者0,1两种状态，
                // 可以程序员自己定义，用于做复杂的条件判断  在这里用来控制总按钮是否被选中
                var flag = true;
                // 每个按钮触发都要检查是不是所有的都勾选了
                for (var i = 0; i < j_tbs.length; i++) {
                    //最开始每个按钮的状态是没选中的，点了一次，则j_tbs[i].checked是true
                    //则取反就是false,   我觉得下面的会更简单更容易理解一点
                    // if (!j_tbs[i].checked) {
                    if (j_tbs[i].checked == false) {
                        flag = false;
                        break;//只要有一个没选，就break退出当前for循环，提高执行效率
                    }
                }
                j_cbAll.checked = flag;
            }
        }
        //取消
        cancel.onclick = function () {
            for (var i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = false;
            }
        }
        reserve.onclick = function () {
            for (var i = 0; i < j_tbs.length; i++) {
                if (j_tbs[i].checked) {
                    j_tbs[i].checked = false;
                }
                else {
                    j_tbs[i].checked = true;
                }
                if (j_tbs[i].checked == false) {
                    j_cbAll.checked = false;
                }
            }

        }
    </script>