练习：全选&反选

最新推荐文章于 2023-08-01 23:37:25 发布

越努力越

最新推荐文章于 2023-08-01 23:37:25 发布

阅读量92

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45353679/article/details/104447775

版权

JavaScript 专栏收录该内容

32 篇文章 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>
    <input type="checkbox" name="" id="qx" />全选
    <input type="checkbox" name="" id="fx" />反选
    <input type="checkbox" name="q" id="">红烧肉
    <input type="checkbox" name="q" id="">西虹市鸡蛋
    <input type="checkbox" name="q" id="">宫爆鸡丁
    <input type="checkbox" name="q" id="">酸菜鱼
    <input type="checkbox" name="q" id="">小炒
    <script>
        var qx = document.querySelector('#qx');
        var fx = document.querySelector('#fx');
        var qs = document.getElementsByName('q');
        //console.dir(qx); qx.checked true/false
        qx.onclick = function() {
            // 获取全选按钮选中状态
            var isChecked = this.checked;
            for(var i=0; i<qs.length; i++) {
                qs[i].checked = isChecked;
            }
        }

        fx.onclick = function() {
            for(var i=0; i<qs.length; i++) {
                qs[i].checked = !qs[i].checked;
            }
        }

        // 给各个菜进行单击事件绑定
        var count = 0;
        for(var i=0; i<qs.length; i++) {
            qs[i].onclick = function() {
                count = 0;
                // 统计所有菜选中个数
                for(var j=0; j<qs.length; j++) {
                    if(qs[j].checked) {
                        count++;
                    }
                }
                if( count === qs.length) {
                    qx.checked = true;
                } else {
                    qx.checked = false;
                }
            }
        }
    </script>
</body>
</html>

越努力越

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习：全选&反选

选择框功能实现，全选和反选<body> <div class='demo'></div> <script> //方法一 var oDiv = document.querySelector('div'); /* oDiv.style.width = '300px'; ...
复制链接

扫一扫