JavaScript中获取radio的值

JavaScript013

JavaScript中获取radio的值,第1张

1、radio为单选按钮,一般单选按钮有多个可供选择的项,而只能选择一个,比如男、女

2、那么给radio标签里面设定一个id或者class属性

3、在js里面,可以通过checked这个属性来判断哪一个radio标签被选择,

4、这样就可以获取到radio标签的值,然后根据标签的值进行判断,保存/插入数据库等操作

思路:在html中获取被选中的radio的值,即用getElementsByName() 方法可返回带有指定名称的对象的集合进行判断。

步骤如下:

radio代码片断:

<input type="radio" name="a1" value="1"/>正确

<input type="radio" name="a1" value="0" />错误

js代码如下:

var b1= document.getElementsByName('a1')

for (var i = 0i <b1.lengthi++) {

if (b1[i].checked == true) {//如果选中,下面的alert就会弹出选中的值

alert(b1[i].value)

}

}

定义和用法

getElementsByName() 方法可返回带有指定名称的对象的集合。

语法

document.getElementsByName(name)

该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。

另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

这样写好些吧:

<form onsubmit="return check(this)" >

<input type=radio name="a" value=0>0

<input type=radio name="a" value=1>1

<input type=submit value="提交">

</form>

<script   type="text/javascript">

function   check(formObj)

{

      for(var   i=0i<formObj.a.lengthi++)

      {         

               if(formObj.a[i].checked)

               {

               //alert("单选框选中:   "   +   formObj.a[i].value)

               return   true

               }

      }   

      alert("单选框未选中")

      return   false

}   

</script>

radio标签的取值方法如下:

<html:radio   property="userRole"   value="operator"   onclick="radioValue()"/>

<html:radio   property="userRole"   value="admin"   onclick="radioValue()"/>

<script   language="javascript">      

                        function   radioValue(){

                                 var   obj   =   document.all.userRole

                                 if(obj){

                                       for(var   i=0i<obj.lengthi++){//适合length>=2时,当obj.length==null时,可以直接取obj.value值

                                             if(obj[i].checked){

                                                   alert(obj[i].value)

                                                   break

                                             }

                                       }

                                 }         

                        }      

</script>