思路:遍历radio对象,通过checked进行判断radio是否选中,选中的项会有checked属性,判断选中后,可进行后续操作。
示例代码如下。
<!-- html 部分 --><p>
<label for="gender">性别:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</label>
<button id="sub" type="button">提交</button>
</p>
<!-- script 部分 -->
<script>
var oRadio=document.getElementsByName("gender"),//获取radio,是个数组
oButton=document.getElementById("sub"),//获取按钮
hasValue=false,//定义变量
checkedVal=""
function getVal(){ //获取radio选中值函数
for(i=0i<oRadio.lengthi++){//循环数组
if(oRadio[i].checked){//判断当前项是否被选中
//已选中的操作,获取选中的值
hasValue=true
checkedVal=oRadio[i].value
//return checkedVal
}else{
hasValue=false
}
}
}
oButton.onclick=function(){
getVal()
console.log(checkedVal)//checkedVal即是radio的选中值
console.log(hasValue)//hasValue如果是true,则radio有选中值,否则没有值
}
</script>
思路:在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 = 0 i < b1.length i++) {
if (b1[i].checked == true) {//如果选中,下面的alert就会弹出选中的值
alert(b1[i].value)’弹出取得的数据
}
}
定义和用法
getElementsByName() 方法可返回带有指定名称的对象的集合。
语法
document.getElementsByName(name)
该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。