JavaScript----全选、反选和取消

最新推荐文章于 2022-04-26 16:17:53 发布

天道酬勤Fan

最新推荐文章于 2022-04-26 16:17:53 发布

阅读量360

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_42567323/article/details/101423728

版权

前言

上一个博客实现了一个简单的模态对话框，这一节里实现一下全选、取消以及反选。

1.分析

我们来分析一下全选、取消以及反选怎么做：
首先要做三个复选框，接下来分析三个功能：

全选：要实现全选，我们就得先获取到所有的复选框，然后选上它；
取消：要实现取消，也需要先获取所有的复选框，然后取消选择；
反选：要实现反选，首先要获取所有的复选框，然后判断单选框的状态，如果是在选择状态，就取消选择，如果是在取消状态，就选择。

在这里，我们就要用到复选框的一个功能：

checkbox.checked

如果checkbox.checked=false，就说明这个复选框处于取消状态，如果等于true，则说明处于选择状态。我们来看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选、反选及取消</title>
    <style>
        .hide{
            display: none;  /* 默认不显示*/
        }
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;   /* 透明度*/
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;"> <!--去掉边框-->
    <div>
        <input type="button" value="添加" onclick="ShowModel()">
        <input type="button" value="全选" onclick="ChoseAll()">
        <input type="button" value="取消" onclick="CancleAll()">
        <input type="button" value="反选" onclick="ReverseAll()">

        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox">1.1.1.1</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td><input type="checkbox">1.1.1.2</td>
                    <td>92</td>
                </tr>
                <tr>
                    <td><input type="checkbox">1.1.1.3</td>
                    <td>93</td>
                </tr>
            </tbody>
        </table>
    </div>


    <!--    遮罩层开始，第二层背景透明色-->
    <div id="i1" class="c1 hide">

    </div>
    <!--    遮罩层结束-->

    <!--弹出框开始-->
    <div id="i2" class="c2 hide">
        <p><input type="text"></p>
        <p><input type="text"></p>
        <p>
            <input type="button" value="取消" onclick="HideModel()">
            <input type="button" value="确定">
        </p>
    </div>
    <!--弹出框结束-->

    <script>
        function ShowModel() {
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
        }

        function HideModel() {
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }

        function ChoseAll() {
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for (var i=0;i<tr_list.length;i++){
                // 循环所有的tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0]  // 这个值就是checkbox
                // 接下来就是给checkbox打上对勾
                checkbox.checked = true;
            }
        }

        function CancleAll() {
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for (var i=0;i<tr_list.length;i++){
                // 循环所有的tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0]  // 这个值就是checkbox
                // 接下来就是给checkbox打上对勾
                checkbox.checked = false;
            }
        }

        function ReverseAll() {
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for (var i=0;i<tr_list.length;i++){
                // 循环所有的tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0]  // 这个值就是checkbox
                // 接下来就是给checkbox打上对勾
                //checkbox.checked = false;
                if (checkbox.checked){
                    checkbox.checked = false;
                }
                else {
                    checkbox.checked = true;
                }
            }
        }
    </script>
</body>
</html>

执行效果：
全选：
在这里插入图片描述

取消：
在这里插入图片描述

反选：
（反选之前：）

在这里插入图片描述

（反选之后：）
在这里插入图片描述

2.代码分析

简单分析一下代码：

function ChoseAll() {
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for (var i=0;i<tr_list.length;i++){
                // 循环所有的tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0]  // 这个值就是checkbox
                // 接下来就是给checkbox打上对勾
                checkbox.checked = true;
            }
        }

代码流程：

先获取到tbody：var tbody = document.getElementById(‘tb’);
然后获取到tbody下的所有tr：var tr_list = tbody.children;返回的是一个列表
循环tr列表，每个tr中的第一个就是checkbox：var checkbox = current_tr.children[0].children[0] // 这个值就是checkbox
对于全选，将checkbox的checked属性设置为true；
对于取消，将checkbox的checked属性设置为false；
对于反选，首先判断checkbox的checked属性，然后将其属性设置为相反的即可。

写在最后

本文是个人的一些学习笔记,如有侵权,请及时联系我进行删除,谢谢大家.

天道酬勤Fan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript----全选、反选和取消

前言    上一个博客实现了一个简单的模态对话框，这一节里实现一下全选、取消以及反选。1.分析    我们来分析一下全选、取消以及反选怎么做：    首先要做三个单选框，接下来分析三个功能：全选：要实现全选，我们就得先获取到所有的单选框，然后选上它；取消：要实现取消...
复制链接

扫一扫