原生JS按钮案例——全选、反选、全不选

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

h_jQuery

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

阅读量382

点赞数

分类专栏： javascript HTML5 css3 文章标签： js checkbox javascript css jquery

本文链接：https://blog.csdn.net/h_jQuery/article/details/118605935

版权

javascript 同时被 3 个专栏收录

123 篇文章 0 订阅

订阅专栏

HTML5

22 篇文章 0 订阅

订阅专栏

css3

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form action="">
        <p><input type="checkbox" name="" id="">苹果</p>
        <p><input type="checkbox" name="" id="">香蕉</p>
        <p><input type="checkbox" name="" id="">草莓</p>
        <p><input type="checkbox" name="" id="">芒果</p>
        <p><input type="checkbox" name="" id="">葡萄</p>
        <p><input type="checkbox" name="" id="">西瓜</p>
    </form>
    <button onclick="getAll(0)">全选</button>
    <button onclick="getAll(1)">全不选</button>
    <button onclick="getAll(2)">反选</button>
    <script>
        var btn = document.querySelectorAll('button');
        var inps = document.querySelectorAll('input');
        var flag = true
        for (var i = 0; i < btn.length; i++) {
            // 将i存在index属性中,可以判断是第几个button
            btn[i].index = i
                // 按钮绑定点击事件
            btn[i].onclick = function() {
                // console.log(inps[1].checked);
                // 判断是第几个button，来进行相关的处理
                /* if (this.index == 0) {
                    // 全选功能
                    // 循环inps数组，将input按钮的checked属性全都设置为true
                    for (var i = 0; i < inps.length; i++) {
                        inps[i].checked = true
                    }
                } else if (this.index == 1) {
                    // 全不选功能
                    // 循环input数组，将input按钮的checked属性全都设置为false
                    for (var i = 0; i < inps.length; i++) {
                        inps[i].checked = false
                    }
                } else {
                    // 反选功能
                    // 循环input数组，将input按钮的checked属性设置为原状态的反态
                    for (var i = 0; i < inps.length; i++) {
                        inps[i].checked = !inps[i].checked
                    }
                } */
                getAll(this.index)
            }
        }

        function getAll(i) {
            if (i == 0) {
                // 全选功能
                // 循环inps数组，将input按钮的checked属性全都设置为true
                for (var i = 0; i < inps.length; i++) {
                    inps[i].checked = true
                }
            } else if (i == 1) {
                // 全不选功能
                // 循环input数组，将input按钮的checked属性全都设置为false
                for (var i = 0; i < inps.length; i++) {
                    inps[i].checked = false
                }
            } else {
                // 反选功能
                // 循环input数组，将input按钮的checked属性设置为原状态的反态
                for (var i = 0; i < inps.length; i++) {
                    inps[i].checked = !inps[i].checked
                }
            }
        }
        /*
		function getAll(num) {
            for (let i = 0; i < inps.length; i++) {
                if (num == 0) {
                    // 全选功能
                    // 循环inps数组，将input按钮的checked属性全都设置为true
                    inps[i].checked = true
                } else if (num == 1) {
                    // 全不选功能
                    // 循环input数组，将input按钮的checked属性全都设置为false
                    inps[i].checked = false
                } else {
                    // 反选功能
                    // 循环input数组，将input按钮的checked属性设置为原状态的反态
                    inps[i].checked = !inps[i].checked
                }
            }

        }
		*/
    </script>
</body>

</html>

效果图：
在这里插入图片描述

h_jQuery

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS按钮案例——全选、反选、全不选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
复制链接

扫一扫

专栏目录