JavaScript 实现全选 / 反选功能

2021-12-25 10:49:02

JavaScript 实现全选 / 反选功能

　　版权声明：未经授权，内容严禁转载！　　

构建主体界面

编写 HTML 代码 和 CSS 代码，设计主题界面

<style>

    #user {

        width: 500px;

        text-align: center;

    }

    #user, #user th, #user td {

        border: 1px solid #000;

        border-collapse: collapse;

    }

</style>

<h1>管理员列表</h1>

<table id="user">

    <thead>

    <tr>

        <th><input type="checkbox">全选</th>

        <th>管理员ID</th>

        <th>姓名</th>

        <th>操作</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td><input type="checkbox"></td>

        <td>1</td>

        <td>Tom</td>

        <td>删除修改</td>

    </tr>

    <tr>

        <td><input type="checkbox"></td>

        <td>2</td>

        <td>Jayvee</td>

        <td>删除修改</td>

    </tr>

    <tr>

        <td><input type="checkbox"></td>

        <td>3</td>

        <td>Mia</td>

        <td>删除修改</td>

    </tr>

    <tr>

        <td><input type="checkbox"></td>

        <td>4</td>

        <td>Jack</td>

        <td>删除修改</td>

    </tr>

    </tbody>

</table>

<button id="reverse" type="button">反向选择</button>

<button id="del" type="button">删除选定</button>

　　　　JavaScript 实现全选 / 反选功能

思路引导

　　设计完主体界面，接下来就要编写 JavaScript 脚本实现 全选/反选 功能，如果要单独建立一个新的 js 文件记得要在HTML界面进行导入命令，导入要在HTML界面最后。

　　因为浏览器加载页面的时候从上而下，如果将 JavaScript 文件放在 body上面，在浏览器加载 JavaScript 时HTML 文件的各个标签还没有加载，JavaScript中使用的标签会找不到，出现错误！

实现全选功能

编写JavaScript脚本代码实现 全选功能

// 1 .获取所有触发事件的元素：全选 四个复选框 反选 删除

// 全选

var chbAll = document.querySelector("#user thead tr th:first-child>input");

// console.log(chbAll);

// 四个复选框

var chbs = document.querySelectorAll("#user tbody tr td:first-child>input");

// console.log(chbs);

// 反选

var reverse = document.querySelector("#reverse");

// console.log(reverse);

// 删除选定

var del = document.querySelector("#del");

// console.log(del);

// 实现全选功能

// 绑定事件处理函数

chbAll.onclick = function () {

    //判断全选当前是否被选中

    //   第一种方法

    // if (chbAll.checked) {

    //     // 如果选中四个复选框全选中

    //     // 循环四个复选框设置 checked 为选中 true

    //     for (var i = 0; i < chbs.length; i++) {

    //         chbs[i].checked = true;

    //     }

    // }else {

    //     // 如果没选中四个复选框全不选中

    //     // 循环四个复选框设置 checked 为不选中 false

    //     for (var i = 0; i < chbs.length; i++) {

    //         chbs[i].checked = false;

    //     }

    // }

    // 第二种方法。

    // 上面方法太冗余，循环设置四个复选框的选中状态和上面全选框一致即可

    // 减少代码，简单！

    for (var i = 0; i < chbs.length; i++) {

        // chbs[i].checked = chbAll.checked;

        // 建议使用 this 关键字，以后万一改掉了 id 名字也不会影响~

        chbs[i].checked = this.checked;

    }

}

　　JavaScript 实现全选 / 反选功能

实现四个小复选框的功能

1. 点击其中一个小复选框要判断这四个小的复选框是否全被选中，如果四个全被选中需要将全选按钮勾上。

2. 如果点击其中一个取消了选中，那么全选按钮就是取消的。

总结：点击之后要判断这小复选框是被选中还是取消，如果是选中，就要判断这四个是不是全选中，如果全选中则全选框被选中，如果不是则选中自己。如果点击之后是取消选中，则全选框一定是取消选中的。

继续编写 JavaScript 脚本代码，实现四个小复选框功能
// 为 tbody 中的每一个 chb 绑定事件处理函数

for (var i = 0; i < chbs.length; i++) {

    chbs[i].onclick = function () {

        // 判断当前chb是选中韩式取消操作

        if (this.checked) {

            // 如果选中，判断是否都是选中

            // （查找tbody中是否有 未被选中的）

            var unchecked = document.querySelector("#user tbody tr td:first-child>input:not(:checked)");

            if (unchecked == null) {

                // 如果没有，设置全选被选中

                chbAll.checked = true;

            }

        } else {

            // 如果是取消，则自己取消并且全选也取消

            chbAll.checked = false;

        }

    }

}

　　JavaScript 实现全选 / 反选功能

实现 反向选择 和 删除选定 功能

编辑 JavaScript 脚本代码实现 反向选择 和 删除选定 功能

// 反选

reverse.onclick = function () {

    // 循环 实现反选

    for (var i = 0; i < chbs.length; i++) {

        chbs[i].checked = !chbs[i].checked;

    }

    // 如果选中，判断是否都是选中

    // （查找tbody中是否有 未被选中的）

    var unchecked = document.querySelector("#user tbody tr td:first-child>input:not(:checked)");

    if (unchecked == null) {

        // 如果没有，设置全选被选中

        chbAll.checked = true;

    } else {

        chbAll.checked = false;

    }

}

// 取消选定

del.onclick = function () {

    var checked = document.querySelectorAll("#user tbody tr td:first-child>input:checked");

    if (checked !== null) {

        for (var i = 0; i < checked.length; i++) {

            checked[i].checked = false;

        }

    }

    if (chbAll.checked) chbAll.checked = false;

}

　　JavaScript 实现全选 / 反选功能

完整案例代码

 HTML + CSS

<style>

    #user {

        width: 500px;

        text-align: center;

    }

    #user, #user th, #user td {

        border: 1px solid #000;

        border-collapse: collapse;

    }

</style>

<h1>管理员列表</h1>

<table id="user">

    <thead>

    <tr>

        <th><input type="checkbox">全选</th>

        <th>管理员ID</th>

        <th>姓名</th>

        <th>操作</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td><input type="checkbox"></td>

        <td>1</td>

        <td>Tom</td>

        <td>删除修改</td>

    </tr>

    <tr>

        <td><input type="checkbox"></td>

        <td>2</td>

        <td>Jayvee</td>

        <td>删除修改</td>

    </tr>

    <tr>

        <td><input type="checkbox"></td>

        <td>3</td>

        <td>Mia</td>

        <td>删除修改</td>

    </tr>

    <tr>

        <td><input type="checkbox"></td>

        <td>4</td>

        <td>Jack</td>

        <td>删除修改</td>

    </tr>

    </tbody>

</table>

<button id="reverse" type="button">反向选择</button>

<button id="del" type="button">删除选定</button>

<script src="mJS.js"></script>

JavaScript 脚本

// 1 .获取所有触发事件的元素：全选 四个复选框 反选 删除

// 全选

var chbAll = document.querySelector("#user thead tr th:first-child>input");

// console.log(chbAll);

// 四个复选框

var chbs = document.querySelectorAll("#user tbody tr td:first-child>input");

// console.log(chbs);

// 反选

var reverse = document.querySelector("#reverse");

// console.log(reverse);

// 删除选定

var del = document.querySelector("#del");

// console.log(del);

// 实现全选功能

// 绑定事件处理函数

chbAll.onclick = function () {

    //判断全选当前是否被选中

    //   第一种方法

    // if (chbAll.checked) {

    //     // 如果选中四个复选框全选中

    //     // 循环四个复选框设置 checked 为选中 true

    //     for (var i = 0; i < chbs.length; i++) {

    //         chbs[i].checked = true;

    //     }

    // }else {

    //     // 如果没选中四个复选框全不选中

    //     // 循环四个复选框设置 checked 为不选中 false

    //     for (var i = 0; i < chbs.length; i++) {

    //         chbs[i].checked = false;

    //     }

    // }

    // 第二种方法。

    // 上面方法太冗余，循环设置四个复选框的选中状态和上面全选框一致即可

    // 减少代码，简单！

    for (var i = 0; i < chbs.length; i++) {

        // chbs[i].checked = chbAll.checked;

        // 建议使用 this 关键字，以后万一改掉了 id 名字也不会影响~

        chbs[i].checked = this.checked;

    }

}

// 为 tbody 中的每一个 chb 绑定事件处理函数

for (var i = 0; i < chbs.length; i++) {

    chbs[i].onclick = function () {

        // 判断当前chb是选中韩式取消操作

        if (this.checked) {

            // 如果选中，判断是否都是选中

            // （查找tbody中是否有 未被选中的）

            var unchecked = document.querySelector("#user tbody tr td:first-child>input:not(:checked)");

            if (unchecked == null) {

                // 如果没有，设置全选被选中

                chbAll.checked = true;

            }

        } else {

            // 如果是取消，则自己取消并且全选也取消

            chbAll.checked = false;

        }

    }

}

// 反选

reverse.onclick = function () {

    // 循环 实现反选

    for (var i = 0; i < chbs.length; i++) {

        chbs[i].checked = !chbs[i].checked;

    }

    // 如果选中，判断是否都是选中

    // （查找tbody中是否有 未被选中的）

    var unchecked = document.querySelector("#user tbody tr td:first-child>input:not(:checked)");

    if (unchecked == null) {

        // 如果没有，设置全选被选中

        chbAll.checked = true;

    } else {

        chbAll.checked = false;

    }

}

// 取消选定

del.onclick = function () {

    var checked = document.querySelectorAll("#user tbody tr td:first-child>input:checked");

    if (checked !== null) {

        for (var i = 0; i < checked.length; i++) {

            checked[i].checked = false;

        }

    }

    if (chbAll.checked) chbAll.checked = false;

}

结束了，这个案例用在 购物车 还是蛮好的~

上一篇：搭建基于nginx-rtmp-module的流媒体服务器


下一篇：分布式锁实践（二）-ZooKeeper实现总结