js中全选与反选

最新推荐文章于 2023-07-11 22:34:21 发布

Junju_

最新推荐文章于 2023-07-11 22:34:21 发布

阅读量172

点赞数

分类专栏： javascript项目文章标签： javascript

本文链接：https://blog.csdn.net/m0_58451019/article/details/123965657

版权

javascript项目专栏收录该内容

10 篇文章 1 订阅

订阅专栏

window.onload = function (){

    document.getElementById("all_select").onclick = function (){
        var Hobby = document.getElementsByName("hobby");
        for(i = 0; i < Hobby.length; i++){

            Hobby[i].checked = this.value;

        }
        document.getElementById("inverse").onclick = function (){

            var Hobby = document.getElementsByName("hobby");

            for(i = 0; i < Hobby.length; i++){

                Hobby[i].checked = (!Hobby[i].checked)

            }

        }

    }

}
js部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js.js"></script>
<body>

<input type="checkbox" id="all_select">全选 &nbsp;<input type="checkbox" id="inverse">反选
<br>
<br>
<input type="checkbox" name="hobby">学习
<br>
<input type="checkbox" name="hobby">练习普通话
<br>
<input type="checkbox" name="hobby">练习书法
<br>
<input type="checkbox" name="hobby">编程

</body>
</html>

html部分