JavaScript操作form表单元素(单选框复选框)

通过input就可以将一个简单的复选框呈现在页面上
复选框为checkbox对象

<input type="checkbox" name="fav" id="fav" value="" />  <br/>

全选
因为要得到复选框数组，而id又不能重复。所以通过name来得到复选框数组。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同

反选
同样的方法得到复选框数组，遍历的时候判断如果checked值为true则改为false，checked值为false则改为true

要实现的页面大概如下：

在这里插入图片描述

<html>
    <head>
        <title>操作表单元素</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--声明js代码域-->
        <!---
        js操作多选框，单选框
        被选中状态下js中的checked属性值为true;未选中状态下为flase
        js操作下拉框，被选择的option对象在js中select属性为true;位选中为flase
        -->
        <script type="text/javascript">
            //多选框操作
            function testCheckBox(){
                //获取所有多选元素对象集合
                var favs=document.getElementsByName("fav");
                //遍历数组
                for(var i=0;i<favs.length;i++){
                    if(favs[i].checked){
                         alert(favs[i].value+":"+favs[i].checked);
                     }
                   }
            }
            //全选
            function testCheckBox2(){
                var favs=document.getElementsByName("fav");
                for( var i=0;i<favs.length;i++)
                {
                    favs[i].checked=true;
                }
            }
            //反选
            function testCheckBox3(){
                  var favs=document.getElementsByName("fav");
                for( var i=0;i<favs.length;i++)
                {
                    favs[i].checked =!favs[i].checked;
                }
            }
            //操作下拉框
            function testSel(){
                //获取下拉框对象
                var sel=document.getElementById("address");
              //alert(sel.value);
               var os=sel.options;
               for(var i=0;i<os.length;i++){
                   if(os[i].selected){
                   alert(os[i].value+":"+os[i].text);
               }
           }
            }
            
         </script>
    </head>
    <body>
        <h3> 操作表单元素</h3>
        <hr>
        <b>操作多选框</b><br>
      <input type="checkbox" name="fav" id="fav" value="1" />远走高飞<br/>
      <input type="checkbox" name="fav" id="fav" value="2" />李白<br/>
      <input type="checkbox" name="fav" id="fav" value="3" />说散就散<br/>
      <input type="checkbox" name="fav" id="fav" value="4" />当<br>
      <input type="checkbox" name="fav" id="fav" value="5" />see you again<br>
      <input type="checkbox" name="fav" id="fav" value="6" />fade<br /><br/><br/>
      
      <input type="button" value="播放" onclick="testCheckBox()"/>
      <input type="button"  value="全选" onclick="testCheckBox2()"/>
      <input type="button"  value="反选" onclick="testCheckBox3()"/>
      <hr/>
      
      <select name="" id="address" onchange="testSel()">
          <option value="0">--请选择--</option>
          <option value="1">上海</option>
          <option value="2">深圳</option>
          <option value="3">武汉</option>
    </select>
    </body>
</html>

自己在写这部分代码时，出现了一些问题：多选和反选的功能没有实现。自己在下面找了下原因，发现是自己把etElementById(), getElementsByName()弄混了。
WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签。

getElementById()：
getElementById()可以访问DOCUMENT中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。
getElementsByName()：
该方法是通过NAME属性来获得元素，但注意区别：getElementById()中是element,而getElementsByName()是elements。显而易见，getElementsByName()返回值有很多，这是因为document中每一个元素的ID是唯一的，但name却可以重复。如果一个文档中有两个以上的标签name相同，那么getElementsByName()就可以取得这些元素组成一个数组。

来源：CSDN

作者：L2fine

链接：https://blog.csdn.net/qq_42711899/article/details/104212565

标签

input

form

数组

JavaScript操作form表单元素(单选框 复选框)

JavaScript操作form表单元素(单选框复选框)