js判断radio是否被选中

JavaScript06

js判断radio是否被选中,第1张

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