JavaScript操作全选框(表单复选框)

最新推荐文章于 2024-05-07 23:11:20 发布

bigzhad

最新推荐文章于 2024-05-07 23:11:20 发布

阅读量337

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/hpz233/article/details/127678203

版权

<!--
 * @Descripttion: 
 * @Version: 
 * @Author: bigzhad
 * @Date: 2022-11-03 17:04:51
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-03 19:14:22
-->
<!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>
    <input type="checkbox" id="全选">全选
    <button id="反选">反选</button><br>

    <input type="checkbox" class="item">选项1<br>
    <input type="checkbox" class="item">选项2<br>
    <input type="checkbox" class="item">选项3<br>
    <input type="checkbox" class="item">选项4<br>
    <input type="checkbox" class="item">选项5<br>
    <input type="checkbox" class="item">选项6
    <script>
        // 用户点击全选
        var 全选 = document.getElementById('全选')
        var 反选 = document.getElementById('反选')
        var all = [...document.getElementsByClassName('item')];
        // 如果全选按钮被选中 那么下面四项都被选中
        全选.onclick = function () {
            all.forEach(function (item) {
                item.checked = 全选.checked
            })
        }
        // 如果下面四项都选中那么全选也被选中
        all.forEach(function (item) { item.onclick = fn })
        function fn() {
            全选.checked = all.every(function (item) { return item.checked == true })
        }

        反选.onclick = function () {
            all.forEach(function (item) {
                if (item.checked == true) {
                    item.checked = false
                } else {
                    item.checked = true
                }
            })
        }
    </script>
</body>

</html>