JavaScript -- 全选反选效果制作

最新推荐文章于 2023-07-07 16:55:54 发布

zn0128

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量305

点赞数

文章标签： javascript css html5

本文链接：https://blog.csdn.net/zn0128/article/details/120811362

版权

这篇博客介绍了如何使用JavaScript实现HTML表单中的全选和反选功能。通过点击全选按钮，可以一次性选中或取消选中所有子选项；点击反选按钮，则会反转所有子选项的选中状态。示例代码中，利用DOM操作和事件监听，实现了这一交互效果，同时提供了详细的注释解释代码逻辑。

摘要由CSDN通过智能技术生成

我们在网页中经常遇到表单中全选选中以及反选的效果，以下代码为实现方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 260px;
            margin: 50px auto;
        }
        table {
            width: 260px;
            border-collapse:collapse;
            border: 1px solid #eee;
            line-height: 30px;
            font-size: 14px;
        }
        table thead th {
            border: 1px solid #eee;
            background-color: rgb(6, 125, 236);            
            font-weight: normal;
            color: #fff;                  
        }
        table tbody td {
            border: 1px solid #ccc;
            padding-left: 10px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="all">
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphone 8</td>
                    <td>4000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphone 5</td>
                    <td>3000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphone 9</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphone 11</td>
                    <td>8000</td>
                </tr>
            </tbody>        
        </table>
        <input type="button" value=" 反 选 " id="btn"> 
    </div>
    
    <script>
        // 获取元素
        var btn = document.getElementById("btn");
        var all = document.getElementById("all");
        var tb = document.getElementById("tb");
        var tb_inputs = tb.getElementsByTagName("input");

        // 1.全选:让子选项的选择效果与全选保持一致
        all.onclick = function () {
            // 遍历所有的子选项
            for (var i = 0; i < tb_inputs.length ; i++) {
                //让每一个子选项的 checked 属性值与全选保持一致
                tb_inputs[i].checked = all.checked;
            }
        };
        // 2.单独选择子选项过程
        // 给每一次点击任何一个子项进行判断
        for (var i = 0;  i < tb_inputs.length ; i++) {
            // 给每一个子选项添加点击事件
            tb_inputs[i].onclick = function() {
                //需要判断所有的子选项是否都是选中的状态
                allChecked ();
            };
        }
        // 3.反选
        btn.onclick = function() {
            for (var i = 0;  i < tb_inputs.length ; i++) {
                // checked的属性值与当前的其相反
                tb_inputs[i].checked = !tb_inputs[i].checked;
            }
            //控制全选效果，也要进行取反
            allChecked ();
        };

        // 定义一个 all 是否被选中的函数
        function allChecked () {
            // 过渡变量，初始认为所有的子选项都是被选中的
            var isAllChecked = true;
            //遍历所有子选项，进行判断
            for (var j = 0; j < tb_inputs.length ; j++) {
                // 一旦有一个是没有被选择的，让变量变为 false
                if (tb_inputs[j].checked === false) {
                    isAllChecked = false;
                    //只要走到这里，就说明肯定不是全选，不需要往下执行循环
                    break;
                }
            }
            //如果勋魂内部条件永远不成立，说明所有子选项都是被选中，isAllChecked 的值没有发生变化，还是true
            // 给 all 元素设置 checked 属性
            all.checked = isAllChecked;
        }
    </script>
</body>
</html>