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

JavaScript03

如何用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() 方法返回的是元素的数组,而不是一个元素。

可以按照下面的代码来操作:

<html>

<head>

<script type="text/javascript" src="./jquery.min.js"></script>

</head>

<body>

<div>

<input id="rdo1" name="rdo1" type="radio" value="1" checked="checked"/>是

<input id="rdo1" name="rdo1" type="radio" value="0"/>否

<button id="btn1">是</button>

<button id="btn2">否</button>

<div>

<script type="text/javascript">

$(function(){

$("#btn1").click(function(){

$("input[name='rdo1']").eq(0).attr("checked","checked")

$("input[name='rdo1']").eq(1).removeAttr("checked")

$("input[name='rdo1']").eq(0).click()

})

$("#btn2").click(function(){

$("input[name='rdo1']").eq(0).removeAttr("checked")

$("input[name='rdo1']").eq(1).attr("checked","checked")

$("input[name='rdo1']").eq(1).click()

})

})

</script>

</body>

</html>

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html,填充问题基础代码。

2、在index.html中的<script>标签,输入js代码:

function fun() {

var a = $('input:radio:checked').val()

if (a == 1) {

location.href = 'page1.html'

} else {

location.href = 'page2.html'

}

}

3、浏览器运行index.html页面,选择内容管理,点击登录。

4、此时成功进入到了page2.html页面。