JavaScript基础（8.全选取消实例）

最新推荐文章于 2023-02-06 18:56:28 发布

__XYQ

最新推荐文章于 2023-02-06 18:56:28 发布

阅读量224

点赞数

分类专栏：前端基础知识文章标签： javascript

本文链接：https://blog.csdn.net/qq_41144008/article/details/78795265

版权

前端基础知识专栏收录该内容

41 篇文章 0 订阅

订阅专栏

接上上次的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide {
            display: none;
        }

        .c1 {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 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: -300px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">
<div>
    <input type="button" value="添加" οnclick="ShowModel();"/>
    <input type="button" value="全选" οnclick="ChooseAll();"/>
    <input type="button" value="取消" οnclick="CancelAll();"/>
    <input type="button" value="反选" οnclick="ReverseAll();"/>
    <table>
        <thead>
        <tr>
            <th>选择</th>
            <th>主机名</th>
            <th>端口</th>
        </tr>
        </thead>
        <tbody id="tb">
        <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.1.1</td>
            <td>90</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.1.2</td>
            <td>91</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.1.3</td>
            <td>92</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="取消" οnclick="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 ChooseAll() {
        var tbody = document.getElementById("tb");
        var tb_list = tbody.children;
        for (var i = 0; i < tb_list.length; i++) {
            var current_tr = tb_list[i];
            var checkbox = current_tr.children[0].children[0];
            checkbox.checked = true;
        }
    }
    function CancelAll() {
        var tbody = document.getElementById("tb");
        var tb_list = tbody.children;
        for (var i = 0; i < tb_list.length; i++) {
            var current_tr = tb_list[i];
            var checkbox = current_tr.children[0].children[0];
            checkbox.checked = false;
        }
    }
     function ReverseAll() {
        var tbody = document.getElementById("tb");
        var tb_list = tbody.children;
        for (var i = 0; i < tb_list.length; i++) {
            var current_tr = tb_list[i];
            var checkbox = current_tr.children[0].children[0];
            if(checkbox.checked){
                checkbox.checked = false;
            }else{
                checkbox.checked = true;
            }
        }
    }
</script>
</body>
</html>

效果如下：



点击全选反选取消就是相应的效果：

__XYQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础（8.全选取消实例）

接上上次的实例：html>lang="en"> charset="UTF-8"> Title .hide { display: none; } .c1 { position: fixed; left: 0; to
复制链接

扫一扫

专栏目录