zoukankan      html  css  js  c++  java
  • 通过JS的事件处理取得radio的值

    转自:http://blog.sina.com.cn/s/blog_50a1e17401017pik.html

    提前知识准备:

    在一个HTML文档中,每个元素都可以设置ID和NAME属性。

    其中ID属性是唯一属性,不可以重复,一个ID值只能对应一个元素;

    而NAME属性是可以重复的,一个NAME值可以对应一组元素。
    所以,使用document.getElementByIdx_x(ID)时返回的只有一个被选中的HTML元素;
    而使用document.getElementsByName(NAME)时返回的是一个由多个HTML元素组成的数组

    (哪怕HTML页面中只有一个符合要求的元素,返回的也是数组)。

    document.getElementsByName(NAME)多用于在FORM表单中选取一组checkbox或radio

    方法1:

    <html>
     <head>
      <script type = "text/javascript">
      function change()
      {
       var radio = document.getElementsByName("form1");
       //var radio = document.getElementByIdx_x("form1");

        // 用ById就不能取得全部的radio值,而是每次返回都为1
       var radioLength = radio.length;
       for(var i = 0;i < radioLength;i++)
       {
        if(radio[i].checked)
        {
         var radioValue = radio[i].value;
         alert(radioValue);
        }
       }
      }

      </script>
     </head>
     
     <body>
      <input type = "radio" id = "form1" name = "form1" value = "1" onchange = "change();">选择1
      <input type = "radio" id = "form1" name = "form1" value = "2" onchange = "change();">选择2
      
     </body>
    </html>

    方法2:

    <html>
     <head>
      <script type = "text/javascript">
      function change()
      {
       var New=document.getElementsByName("form1");
       var strNew;
       for(var i=0;i<New.length;i++)
       {
        if(New.item(i).checked) 

        {
         strNew=New.item(i).getAttribute("value"); 
         alert( strNew );  // item()方法:返回集合中的当前项
         break;
        }
        else
        {
         continue;
        }
       }  
      }
      </script>
     </head>
     
     <body>
      <input type = "radio" id = "form1" name = "form1" value = "1" onchange = "change();">选择1
      <input type = "radio" id = "form1" name = "form1" value = "2" onchange = "change();">选择2
     </body>
    </html>

     
  • 相关阅读:
    vscode 简介
    TypeScriot 深入
    TypeScript 三斜线指令
    Mysql基础(二十二):表操作:创建,删除,修改,查询表
    Mysql基础(十):函数(四)分组函数
    Mysql基础(九):函数(三)流程控制函数(IF/CASE WHEN)
    Mysql基础(七):函数(一)常见函数/单行函数分类/数学函数/日期函数/其他函数
    Mysql基础(六):sql查询(六)分页查询/联合查询
    Mysql基础(五):sql查询(五)子查询
    Mysql基础(四):sql查询(四)连接查询
  • 原文地址:https://www.cnblogs.com/shz365/p/4061886.html
Copyright © 2011-2022 走看看