document.getElementsByName()

最新推荐文章于 2025-02-24 23:03:33 发布

川沙妲己。

最新推荐文章于 2025-02-24 23:03:33 发布

阅读量6k

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_48517846/article/details/123467400

版权

这篇博客介绍了如何使用JavaScript实现HTML页面中复选框的全选、全不选和反选功能。通过示例代码展示了如何操作DOM元素，动态改变复选框的选中状态，提供了一种常见的前端交互功能实现方法。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //全选
    function checkAll(){
      //让所有复选框都选中
      //document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
      //这个集合的操作跟数组一样
      //集合中每个元素都是dom对象
      //这个集合中的元素顺序是他们在html页面中从上到下的顺序
      var hobbies = document.getElementsByName("hobby");
      //checked表示复选框的选中状态，如果选中是true,不选中是false
      //checked这个属性可读，可写
      for(var i=0;i<hobbies.length;i++){
        hobbies[i].checked=true;
      }

    }
    //全不选
    function checkNo(){
      var hobbies = document.getElementsByName("hobby");
      for(var i=0;i<hobbies.length;i++){
        hobbies[i].checked=false;
      }
    }
    //反选
    function checkReverse(){

      var hobbies = document.getElementsByName("hobby");
      for(var i=0;i<hobbies.length;i++){
        //hobbies[i].checked = !hobbies[i].checked;
        if(hobbies[i].checked){
          hobbies[i].checked=false;
        }else{
          hobbies[i].checked=true;
        }

      }
    }
  </script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp">c++
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="js">JavaScript
<br/>
<button onclick = "checkAll()">全选</button>
<button onclick = "checkNo()">全不选</button>
<button onclick = "checkReverse()">反选</button>
</body>
</html>