checkbox的全选和取消

最新推荐文章于 2022-06-01 15:30:28 发布

syf_wfl

最新推荐文章于 2022-06-01 15:30:28 发布

阅读量295

点赞数

分类专栏： web 文章标签： checkbox html

本文链接：https://blog.csdn.net/wflsyf/article/details/112858431

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script type="text/javascript">
            onload=function (){
                let n=document.getElementsByName("interest");
                document.getElementById("selectall").onclick=function (){
                    if (document.getElementById("selectall").checked){
                    //    全选
                        for (let i=0;i<n.length;i++)
                            n[i].checked=true;
                    }
                    else {
                    //    取消全选
                        for (let i=0;i<n.length;i++)
                            n[i].checked=false;
                    }
                }
                for (let j=0;j<n.length;j++){
                    n[j].onclick=function (){
                        let count=0;
                        for (let i=0;i<n.length;i++){
                            if (n[i].checked){
                                count++;
                            }
                        }
                            document.getElementById("selectall").checked=(count===3);
                    }
                }
            }
        </script>
        <input type="checkbox" id="selectall"><br>
        <input type="checkbox" name="interest" value="smoke">抽烟<br>
        <input type="checkbox" name="interest" value="drink">喝酒<br>
        <input type="checkbox" name="interest" value="fire hair">烫头<br>
    </body>
</html>