JavaScript——选择框练习

You_PPZ

已于 2022-04-20 20:03:33 修改

阅读量476

点赞数 1

文章标签：前端

于 2022-04-04 18:17:31 首次发布

本文链接：https://blog.csdn.net/jiayou_ppz/article/details/123957728

版权

 <script>
        window.onload = function () {
            /*获取运动栏对象*/
            var items = document.getElementsByName("items");
            /*获取全选/全不选栏对象*/
            var checkedAllBox = document.getElementById("checkedAllBox");
            /*实现全选功能*/
            //获取全选对象
            var checkedAllBtn = document.getElementById("checkedAllBtn");
            //绑定单击函数
            checkedAllBtn.onclick = function () {
                //console.log(items)
                //设置功能，点击时所有运动栏设置为checked状态
                for (var i = 0; i < items.length; i++) {
                    items[i].checked = true;
                    checkedAllBox.checked = true;
                }
            }


            /*设置全不选栏*/
            var checkedNoBtn = document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick = function () {
                //设置功能，点击时所有运动栏设置为不checked状态
                for (var i = 0; i < items.length; i++) {
                    items[i].checked = false;
                    checkedAllBox.checked = false;
                }
            }

            /*设置反选*/
            var checkedRevBtn = document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick = function () {
                //点击时，将运动栏的布尔值反转
                for (var i = 0; i < items.length; i++) {
                    //checkedAllBox.checked = true;
                    items[i].checked = !items[i].checked;

                }
                //判断是否全选
                for (var i = 0; i < items.length; i++) {
                        if (!items[i].checked) {
                            checkedAllBox.checked = false;
                            break;
                        }
                        checkedAllBox.checked = true;
                    }

            }
            /*设置提交*/
            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function () {
                //点击时，输出选择运动栏
                for (var i = 0; i < items.length; i++) {
                    if (items[i].checked) {
                        alert(items[i].value)
                    }
                }

            }

            /*
            全选栏/全不选栏
            */
            var checkedAllBox = document.getElementById("checkedAllBox");
            checkedAllBox.onclick = function () {
                //点击时，遍历运动栏
                for (var i = 0; i < items.length; i++) {
                    //同生死    
                    items[i].checked = checkedAllBox.checked;
                }
            }

            /*给每个运动栏绑定单击函数，判断是否应该使全选栏/全不选栏✔*/
            for (let i = 0; i < items.length; i++) {
                //依次绑定单击函数
                items[i].onclick = function () {
                    //每点一次，对四个运动栏进行一次判断
                    for (var i = 0; i < items.length; i++) {
                        if (!items[i].checked) {
                            checkedAllBox.checked = false;
                            break;
                        }
                        checkedAllBox.checked = true;
                    }
                }

            }
        }
    </script>
</head>

<body>
    <form action="">
        你爱好的运动是？
        <input type="checkbox" id="checkedAllBox">全选/全不选
        <br>
        <input type="checkbox" name="items" value="足球">足球
        <input type="checkbox" name="items" value="篮球">篮球
        <input type="checkbox" name="items" value="羽毛球">羽毛球
        <input type="checkbox" name="items" value="乒乓球">乒乓球
        <br>
        <input type="button" id="checkedAllBtn" value="全  选">
        <input type="button" id="checkedNoBtn" value="全不选">
        <input type="button" id="checkedRevBtn" value="反  选">
        <input type="button" id="sendBtn" value="提  交">
    </form>
</body>

主要流程图