如何用JavaScript取得Radio被选中的值

JavaScript08

如何用JavaScript取得Radio被选中的值,第1张

思路:在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() 方法返回的是元素的数组,而不是一个元素。

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

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

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

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

原理就是:一般使用遍历的方法,判断每个Radio是否被选中,如果是,再取其值.

<form id="userlist" method="post" action="option.php">

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

<input type="radio" name="userid" value="2">2

<input type="radio" name="userid" value="3">3

</form>

<script language="javascript">

function usubmit(action){

var radionum = document.getElementById("userlist").userid

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

if(radionum[i].checked){

userid = radionum[i].value

}

}

window.location.href='option.php?action='+action+'&userid='+userid

}

</script>

上面的需要注意form中设置了id(userlist)

这里有两个要注意的地方:一个是如何取值,一个是如何遍历

document.getElementById("userlist").userid

这是根据form的id再取其中控件元素的name取值的方法。

也可以用document.getElementsByName("userid")直接获得

getElementById与getElementsByName的区别,getElementById取radio类型元素只能选取单个控件,getElementsByName取radio类型元素的时候是取出的整个radio数组,如果一定要用getElementById,则可像上面代码一样先用getElementById取得整个表单的id.后面紧跟radio名称即可

现在知道document.getElementsByName("userid")就是得到一个数组,该数组中的元素是该dom树中所有name为radionum的元素,即使只有一个radio,也是一个只包含一个元素的数组.

而document.all.userid则不同,它是得到页面中的userid元素的引用,当页面中存在多个radio时,它返回的是一个数组,如果页面中只包含一个radio,则得到的就是这个radio对象的引用.由于这时得到的不是一个数组,因此就不能遍历数组来进行判断了.

做成函数,如下:

function getRadioBoxValue(radioName)

{

var obj = document.getElementsByName(radioName)//这个是以标签的name来取控件

for(i=0i<obj.lengthi++) {

if(obj[i].checked) {

return obj[i].value

}

}

return "undefined"

}

JS获取radio里选中的值

function Foo()

{

var selectedIndex = -1

var form1 = document.getElementById("form1")

var i = 0

for (i=0i<form1.r.lengthi++)

{

if (form1.r[i].checked)

{

selectedIndex = i

alert("您选择项的 value 是:" + form1.r[i].value)

break

}

}

if (selectedIndex <0)

{

alert("您没有选择任何项")

}

}