点击按钮实现（全选、取消全选、反选）案例

最新推荐文章于 2024-10-18 11:12:30 发布

幼儿崽

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量237

点赞数

文章标签： javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_73917034/article/details/129131667

版权

这段代码展示了如何使用JavaScript来操作HTML中的复选框按钮。当用户点击‘全选’按钮时，所有复选框被选中；点击‘取消全选’时，所有复选框的选中状态被清除；而‘反选’按钮则会反转每个复选框的选中状态。

摘要由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>
</head>

<body>
    <button>全选</button>
    <button>取消全选</button>
    <button>反选</button>
    <br><br>
    <input type="checkbox">手机<br>
    <input type="checkbox">笔记本<br>
    <input type="checkbox">男装<br>
    <input type="checkbox">美妆<br>
    <input type="checkbox">食品<br>
    <input type="checkbox">图书<br>
    <input type="checkbox">机票<br>
    <input type="checkbox">理财<br>
    <script>
        //获取页面元素
        var btn = document.querySelectorAll('button');
        var input = document.querySelectorAll('input');
        //点击全选时
        btn[0].onclick = function () {
            //遍历所有的input标签
            for (var i = 0; i < input.length; i++) {
                input[i].checked = true;
            }
        }
        //点击取消全选时
        btn[1].onclick = function () {
            for (var i = 0; i < input.length; i++) {
                input[i].checked = false;
            }
        }
        //点击反选时
        btn[2].onclick = function () {
            for (var i = 0; i < input.length; i++) {
                if (input[i].checked == false) {
                    input[i].checked = true;
                } else {
                    input[i].checked = false;
                }
            }
        }
    </script>
</body>

</html>