使用JavaScript实现复选框全选与取消的功能

最新推荐文章于 2020-09-18 13:51:58 发布

weixin_30325971

最新推荐文章于 2020-09-18 13:51:58 发布

阅读量98

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/grnBlogs/p/4825649.html

本文介绍了如何通过JS为网页表单实现全选与单选功能，具体步骤包括HTML代码编写和相关JS代码实现，旨在帮助开发者更高效地构建具有交互性的网页应用。

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

实现效果：

html代码：

1 <body>
2 
3 <input type="checkbox" id="checkAll"/>全选<br>
4 <hr>
5 <input type="checkbox" name="color"/>红色<br>
6 <input type="checkbox" name="color"/>黄色<br>
7 <input type="checkbox" name="color"/>蓝色<br>
8 
9 </body>

JS代码：

 1 <script>
 2     window.onload=function()
 3     {
 4         document.getElementById("checkAll").onclick = checkall;
 5     }
 6     function checkall()
 7     {
 8         var dom = document.getElementById("checkAll");
 9         var doms = document.getElementsByName("color");
10         for(var i = 0;i<doms.length;i++)
11         {
12             doms.item(i).checked = dom.checked;
13         }    
14     }
15 </script>