示例之全选和反选以及取消

最新推荐文章于 2024-10-02 05:39:15 发布

up1292

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量222

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/up1292/article/details/126686104

版权

JavaScript学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <input type="button" value="全选" onclick="ChooseAll();"/>
                <input type="button" value="取消" onclick="CancelAll();"/>
                <input type="button" value="反选" onclick="ReverseAll();"/>
            </tr>
        </thead>

        <tbody id="tb">
            <tr>
                <td>
                    <input type="checkbox" id="test"/>
                </td>
                <td>test1</td>
                <td>test1</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>test2</td>
                <td>test2</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>test2</td>
                <td>test2</td>
            </tr>
        </tbody>

    </table>

    <script>
        function ChooseAll() {
            var tb = document.getElementById('tb');
            //获取tb下所有的tr
            var tr_list = tb.children;
            for(var i=0;i<tr_list.length;i++){
                //循环所有的tr，获取当前的tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                //勾选
                checkbox.checked = true;
            }
        }

        function CancelAll() {
            var tb = document.getElementById('tb');
            var tr_list = tb.children;
            for(var i=0;i<tr_list.length;i++){
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;
            }
        }

        function ReverseAll() {
            var tb = document.getElementById('tb');
            var tr_list = tb.children;
            for(var i=0;i<tr_list.length;i++){
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked){
                    checkbox.checked = false;
                }else {
                    checkbox.checked = true;
                }
            }
        }
    </script>
</body>
</html>