【Javascript】入门之checkbox的全选、反选和不选

最新推荐文章于 2022-12-09 09:28:33 发布

夹心776655

最新推荐文章于 2022-12-09 09:28:33 发布

阅读量454

点赞数

分类专栏：代码实例 js交互设计文章标签： javascript html

本文链接：https://blog.csdn.net/qq_37086980/article/details/110201459

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

js交互设计

46 篇文章 0 订阅

订阅专栏

方法一：如果选中, checked属性为true, 反之为false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框选择</title>
</head>
<body>
    <!-- 1.布局 -->
    <button id = "allcheck">全选</button>
    <button id = "reversecheck">反选</button>
    <button id = "nocheck">不选</button>
    <div class="check">
        <label for = "eat">
            <input type="checkbox" id="eat">吃饭
        </label>
        <label for = "sleep">
            <input type="checkbox" id="sleep">睡觉
        </label>
        <label for = "bean">
            <input type="checkbox" id="bean">打豆豆
        </label>
        <label for = "book">
            <input type="checkbox" id="book">看书
        </label>
        <label for = "entertain">
            <input type="checkbox" id="entertain">娱乐
        </label>
        <label for = "learn">
            <input type="checkbox" id="learn">爱学习
        </label>
        <label for = "lol">
            <input type="checkbox" id="lol">LOL
        </label>
        <label for = "king">
            <input type="checkbox" id="king">王者
        </label>
        <label for = "survive">
            <input type="checkbox" id="survive">绝地
        </label>
    </div>

    <script>
        // 2. 点击全选按钮, 所有复选框都选上
        // 2.1 获取全选按钮, 所有input
        var allcheck = document.getElementById('allcheck');
        console.log(allcheck);
        var checkbox = document.getElementsByTagName('input');
        console.log(checkbox);

        // 2.2 给全选按钮添加事件
        allcheck.onclick = function(){
            // 2.3 遍历所有checkbox
            for(var i = 0; i < checkbox.length; i++){
                 //1.4 将所有checkbox的checked属性设为true
                 checkbox[i].checked = true;
            }
        }

        // 3.点击不选按钮, 所有的都不选
        // 3.1 获取不选按钮
        var nocheck = document.getElementById('nocheck');
        console.log(nocheck);
        // 3.2 给不选按钮添加事件
        nocheck.onclick = function(){
            // 3.3 遍历所有checkbox
            for(var i = 0; i < checkbox.length; i++){
                // 3.4 将所有的checkbox的checked属性设为false
                checkbox[i].checked = false;
            }
        }

        // 4.点击反选按钮, 选中的变为不选中, 不选中的变为选中
        // 4.1 获取反选按钮
        var reversecheck = document.getElementById('reversecheck');
        console.log(reversecheck);

        // 4.2 给反选按钮添加事件
        reversecheck.onclick = function(){
            // 4.3 遍历所有checkbox
            for(var i = 0; i < checkbox.length; i++){
                // 如果是选中的, 则设置为不选
                if(checkbox[i].checked){
                    checkbox[i].checked = false;
                }else{
                    // 否则, 设置为选中
                    checkbox[i].checked = true;
                }
            }
        }
    </script>
</body>
</html>

方法二: 反选采用取反操作!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>全选</button>
    <button>反选</button>
    <button>不选</button><br>

    <input type="checkbox" name="" id="">LOL
    <input type="checkbox" name="" id="">Data
    <input type="checkbox" name="" id="">王者
    <input type="checkbox" name="" id="">CF
    <input type="checkbox" name="" id="">CS
    <input type="checkbox" name="" id="">部落冲突
    <input type="checkbox" name="" id="">奇迹暖暖
    <input type="checkbox" name="" id="">Golf
    <input type="checkbox" name="" id="">俄罗斯方块
    <input type="checkbox" name="" id="">贪玩蓝月

    <script>
        /* 
            描述: 全选: 点击全选, 将所有的复选框都选中
        */
        // 1. 获取元素
        var btns = document.getElementsByTagName('button');
        var inps = document.getElementsByTagName('input');
        console.log(inps, btns);
        // 2. 添加事件
        btns[0].onclick = function(){
            // 将所有的复选框都选中
            for(var i = 0; i < inps.length; i++){
                // 复选框选中  
                console.log(inps[i].checked);
                inps[i].checked = true;
            }
        }

        /* 
            描述: 不选: 点击不选, 将所有的复选框都不选中
        */
        // 2. 添加事件
        btns[2].onclick = function(){
            // 将所有的复选框都选中
            for(var i = 0; i < inps.length; i++){
                // 复选框选中  
                console.log(inps[i].checked);
                inps[i].checked = false;
            }
        }

        /* 
            描述: 反选: 点击反选，让选中的复选框变成未选中  不选中的变成选中
        */
        // 2. 加事件
        btns[1].onclick = function(){
            // 判断每一个元素的按钮状态
            for(var i = 0; i < inps.length; i++){
                // if(inps[i].checked == true){
                //     inps[i].checked = false;
                // } else {
                //     inps[i].checked = true;
                // }

                console.log(inps[i].checked); // true--->false   false--->true  !取反  !true  false   !false  true
                // 将复选框的状态变成当前状态的相反状态
                inps[i].checked = !inps[i].checked;
            }
        }
    </script>
</body>
</html>

夹心776655

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Javascript】入门之checkbox的全选、反选和不选

如果选中, checked属性为true, 反之为false<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复选框选择</title></head&g...
复制链接

扫一扫