选择框反选全选

Posted 2020-10-29 梦中琴歌

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选择框反选全选相关的知识，希望对你有一定的参考价值。

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

        }
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: greenyellow;
            opacity: 0.6;
        }
        .c2{
            width: 500px;
            height: 500px;
            background-color: dodgerblue;
            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="show()"/>
        <input type="button" value="全选" onclick="selectall()"/>
        <input type="button" value="取消" onclick="cancleall()"/>
        <input type="button" value="反选" onclick="reverseall()"/>
        <table>
            <thead>
                <tr>
                    <th>选择 </th>
                    <th>端口器</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>567567</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>567567</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>567567</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="确定"/> </p>
        <p><input type="button" value="取消" onclick="hide()"/> </p>
    </div>
    <!--弹出框结束-->
    <script>
        function  show() {
            document.getElementById(‘i1‘).classList.remove(‘hide‘);
            document.getElementById(‘i2‘).classList.remove(‘hide‘);
        }
        function hide() {
            document.getElementById(‘i1‘).classList.add(‘hide‘);
            document.getElementById(‘i2‘).classList.add(‘hide‘);
        }
        function selectall() {
            var tbobj = document.getElementById("tb");
            var tr_list = tbobj.children;
            for (var i = 0; i < tr_list.length; i++) {
                var trbj = tr_list[i];
                var checkbox = trbj.children[0].children[0];
                checkbox.checked = true
            }
        }
        function cancleall() {
            var tbobj = document.getElementById("tb");
            var tr_list = tbobj.children;
            for (var i = 0; i < tr_list.length; i++) {
                var trbj = tr_list[i];
                var checkbox = trbj.children[0].children[0];
                checkbox.checked = false
            }
        }
        function reverseall() {
            var tbobj = document.getElementById("tb");
            var tr_list = tbobj.children;
            for (var i = 0; i < tr_list.length; i++) {
                var trbj = tr_list[i];
                var checkbox = trbj.children[0].children[0];
                if (checkbox.checked) {
                    checkbox.checked = false
                }
                else
                    checkbox.checked = true
            }
        }

    </script>

</body>
</html>

以上是关于选择框反选全选的主要内容，如果未能解决你的问题，请参考以下文章