练习：JavaScript实现复选框全选，全不选，反选

最新推荐文章于 2022-11-17 16:23:18 发布

海边拾贝seebit

最新推荐文章于 2022-11-17 16:23:18 发布

阅读量457

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/Ada_yangyang/article/details/81290336

Web前端专栏收录该内容

54 篇文章

订阅专栏

本文提供了一个使用HTML和JavaScript实现复选框全选、全不选及反选功能的示例。通过简单的代码展示了如何操作一组拥有相同名称属性的复选框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
<head>
    <title>Title</title>
    <script type="text/javascript">
        function checkAll(booleanValue){
            var hobbies = document.getElementsByName("hobby");
            for(var i=0; i<hobbies.length; i++){
                hobbies[i].checked=booleanValue;
            }
        }

        function reverseCheck() {
            var hobbies = document.getElementsByName("hobby");
            for(var i=0; i<hobbies.length; i++){
                hobbies[i].checked==true?hobbies[i].checked=false:hobbies[i].checked=true;
            }
        }
    </script>
</head>
<body>
<h1>请选择你的爱好：</h1>
全选/全不选<input type="checkbox" name="hobbys" onclick="checkAll(this.checked)"/><br/>
<br/>
<input type="checkbox" name="hobby" value="football" onclick="checkonly(this)"/>足球
<input type="checkbox" name="hobby" value="basketball" onclick="checkonly(this)"/>篮球
<input type="checkbox" name="hobby" value="swimming" onclick="checkonly(this)"/>游泳
<input type="checkbox" name="hobby" value="singing" onclick="checkonly(this)"/>唱歌<br/>
<br/>
<input type="button" value="全选" onclick="checkAll(true)"/>
<input type="button" value="全不选" onclick="checkAll(false)"/>
<input type="button" value="反选" onclick="reverseCheck()"/>
</body>
</html>