全选练习

最新推荐文章于 2023-10-13 22:33:56 发布

407指导员

最新推荐文章于 2023-10-13 22:33:56 发布

阅读量181

点赞数 1

分类专栏： # DOM 文章标签： js

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109273455

版权

DOM 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

全选练习

js中和=的区别

===是全等号，表示恒等的意思。==是等同的意思。==使用时，如果等号两边的值类型不同会先进行类型转换，才能比较。===使用时，是不需要做类型转换的，如果值不同，就一定不相等。

1=="1"//true
1==="1"//false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选练习</title>

    <script type="text/javascript">

        window.onload = function () {
            //所有按钮的name属性相同，全选按钮可以直接获取改组复选框放在类数组里
            var itemsbtn = document.getElementsByName("items");
            //获取全选/全不选的复选框
            var checkedAllBox = document.getElementById("checkedAllBox");

            /**
             * 全选按钮
             *  -点击按钮四个多选框全部被选中
             */
                //#checkedAllBtn
            var checkAllBtn = document.getElementById("checkedAllBtn");
            checkAllBtn.onclick = function () {
                for (var i = 0; i < itemsbtn.length; i++) {
                    //每个复选框默认选中属性checked ture被选中，false不被选中，直接写checked也是被选中
                    itemsbtn[i].checked = true;
                }
                //全选中，上边跟着变
                checkedAllBox.checked = true;
            };

            //#checkedNoBtn
            var checkedNoBtn = document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick = function () {
                for (var i = 0; i < itemsbtn.length; i++) {
                    //每个复选框默认选中属性checked ture被选中，false不被选中，直接写checked也是被选中
                    itemsbtn[i].checked = false;
                }
                //全不选中，上边跟着变
                checkedAllBox.checked = false;
            };

            //#checkedRevBtn反选
            var checkenRevBtn = document.getElementById("checkedRevBtn");
            checkenRevBtn.onclick = function () {
                //默认checkedAllBox设置为选中状态.如果第一次取消选中判断，取消勾选，第二次还是默认勾选，判断不改变默认值
                checkedAllBox.checked = true;

                for (var i = 0; i < itemsbtn.length; i++) {
                    //每个复选框默认选中属性checked ture被选中，false不被选中，直接写checked也是被选中
                    //反选直接把checked值修改为反的
                    if (itemsbtn[i].checked) {
                        itemsbtn[i].checked = false;
                        checkedAllBox.checked = false;
                    } else {
                        itemsbtn[i].checked = true;

                    }
                }


            };

            //#sendBtn
            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function () {
                for (var i = 0; i < itemsbtn.length; i++) {
                    //打印每个选中复选框的值打印
                    if (itemsbtn[i].checked) {
                        alert(itemsbtn[i].value);
                    }
                }
            };

            //#checkedAllBox
            checkedAllBox.onclick = function () {
                /**
                 * 该复选框选中，其他四个复选框也被选中，如果未被选中，其他四个也未被选中
                 */
                for (var i = 0; i < itemsbtn.length; i++) {
                    /*   if (checkedAllBox.checked) {
                          itemsbtn[i].checked = true;
                       }
                       else {itemsbtn[i].checked = false;}
                   }*/
                    //itemsbtn[i].checked = checkedAllBox.checked;
                    //在事件响应中，响应函数是给谁绑定的，this就指向谁。
                    itemsbtn[i].checked = this.checked;
                }

            };
            /**
             *  当四个复选框按钮状态改变时，最上方的复选按钮应该发生改变，比如取消一个
             *  那么上方的状态应该由全选变成非全选，
             */
            //items 为四个多选框绑定单击响应函数
            for (var i = 0; i < itemsbtn.length; i++) {
                //为每个复选框绑定函数
                itemsbtn[i].onclick = function () {
                    //默认checkedAllBox设置为选中状态.如果第一次取消选中判断，取消勾选，第二次还是默认勾选，判断不改变默认值
                    checkedAllBox.checked = true;
                    //判定四个复选框是否被全选
                    for (var j = 0; j < itemsbtn.length; j++) {
                        if (itemsbtn[j].checked == false) {
                            checkedAllBox.checked = false;
                            //一旦进入判断为false，结果已经出来后边的不用执行，提升效率
                            break;
                        }
                    }

                };
            }


        };

    </script>


</head>
<body>

<form action="" method="post">
    你爱好的运动是？<input id="checkedAllBox" type="checkbox"/>全选/全不选

    <br/>
    <input name="items" type="checkbox" value="足球"/>足球
    <input name="items" type="checkbox" value="篮球"/>篮球
    <input name="items" type="checkbox" value="羽毛球"/>羽毛球
    <input name="items" type="checkbox" value="乒乓球"/>乒乓球
    <br/>
    <input id="checkedAllBtn" type="button" value="全　选"/>
    <input id="checkedNoBtn" type="button" value="全不选"/>
    <input id="checkedRevBtn" type="button" value="反　选"/>
    <input id="sendBtn" type="button" value="提　交"/>


</form>

</body>
</html>

细节方面：

1.重复使用的变量设置了全局变量

2.最上方的全选/全不选框要随着下方四个复选框变化而变化，如果刚开始是全选，有一个变化为非选中，则上方标签要改变，如果同时改变该标签两次回复原位，标签又要恢复。这个地方首先要给每个标签按钮绑定函数判断，其次还要有标志，默认为选中，两次改变等于没变。

3最上方的全选/全不选框要随着下方全选，全不选按钮变化。这里就是需要设置默认值，当下方全选按钮点击，上方复选框checked值为true，下方全不选，为false.

4.最上方的全选/全不选框要随着下方反选按钮变化，开始都未选中，直接反选，再次反选，最上方复选框要改变。这里就要用到第二条里说到的判断，但是本身有一个for循环，简化程序，直接将标志放在函数开始部分，然后将修改标志语句checkedAllBox.checked = false;放入判断语句。

在事件响应中，响应函数是给谁绑定的，this就指向谁。

407指导员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
全选练习

全选练习js中和=的区别===是全等号，表示恒等的意思。==是等同的意思。==使用时，如果等号两边的值类型不同会先进行类型转换，才能比较。===使用时，是不需要做类型转换的，如果值不同，就一定不相等。1=="1"//true1==="1"//false<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选练习</title&g
复制链接

扫一扫