DOM控制多选框练习

最新推荐文章于 2024-10-18 17:51:23 发布

2333!!!!!

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量450

点赞数

文章标签： webview javascript vue.js

本文链接：https://blog.csdn.net/weixin_46564011/article/details/122398677

版权

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

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

<body>
    <form action="" method="post">
        <span>你爱好的运动是:</span> <input type="checkbox" id="all" />全选/全不选</br>
        <input type="checkbox" id="item1" name="item" value="足球" />足球
        <input type="checkbox" id="item2" name="item" value="蓝球" />蓝球
        <input type="checkbox" id="item3" name="item" value="羽毛球" />羽毛球
        <input type="checkbox" id="item4" name="item" value="乒乓球" />乒乓球</br>
        <input type="button" id="allcheck" value="全选" />
        <input type="button" id="allncheck" value="全不选" />
        <input type="button" id="reversecheck" value="反选" />
        <!--细节是id都单存在使用 name是多存在使用-->
    </form>
    <script type="text/javascript">
        var all = document.getElementById("all");
        var items = document.getElementsByName("item");
        var item1 = document.getElementById("item1");
        var item2 = document.getElementById("item2");
        var item3 = document.getElementById("item3");
        var item4 = document.getElementById("item4");
        var allcheck = document.getElementById("allcheck");
        var allncheck = document.getElementById("allncheck");
        var reversecheck = document.getElementById("reversecheck");
        all.onclick = function () {
            /*全选或全不选*/
            /*onclick这次又可以了可能是必须指定id才能用
             all.addEventListener("click","方法名")这个也可以
            */
            let checkstats = 1;
            //先检测有没有没选的有没选的stats=0
            for (let i = 0; i < items.length; i++) {
                if (items.item(i).checked != true) {
                    checkstats = 0;
                }
            }
            if (checkstats == 0) {
                for (let i = 0; i < items.length; i++) {
                    items.item(i).checked = true;
                    all.checked = true;
                    /*这行是确保全选按钮与所有项目全亮或全不亮*/
                    /*这个checked属性在vs中.不出来wc*/
                }
            }
            if (checkstats == 1) {
                for (let i = 0; i < items.length; i++) {
                    items.item(i).checked = false;
                    all.checked = false;
                }
            }
        };
        /*单项取消全选也取消,单个单个全选后全选也点亮*/
        function onlycheck() {
            console.log("年后");
            let checkstats = 1;
            for (let i = 0; i < items.length; i++) {
                if (items.item(i).checked != true) {
                    checkstats = 0;
                }
            }
            if (checkstats == 1) {
                all.checked = true;
            } else {
                all.checked = false;
            }
        }
        item1.addEventListener("click", onlycheck);
        item2.addEventListener("click", onlycheck);
        item3.addEventListener("click", onlycheck);
        item4.addEventListener("click", onlycheck);
        /*循环添加试过了不行shit,对事件监听与onclick属性有点理解了*/
        /*
        首先都是异步方法事件监听的click是对无法使用onclick属性的dom来使用的
        他们都必须一直存在,丢了立马就用不了了不能像对象一样使用它
        */
        allcheck.onclick = function () {
            /*全选*/
            for (let i = 0; i < items.length; i++) {
                items.item(i).checked = true;
                all.checked = true;
            }
        }
        allncheck.onclick = function () {
            /*全不选*/
            for (let i = 0; i < items.length; i++) {
                items.item(i).checked = false;
                all.checked = false;
            }
        }
        reversecheck.onclick = function () {
            /*反选*/
            let c = 0;
            for (let i = 0; i < items.length; i++) {
                if (items.item(i).checked != true) {
                    items.item(i).checked = true;
                    c++;
                } else {
                    items.item(i).checked = false;
                    c--;
                }
            }
            if (c == 4) {
                /*全没选的c++最后=4 让他全选后all也选上*/
                all.checked = true;
            }
            if (c == -4) {
                all.checked = false;
            }

        }

    </script>
</body>

</html>