Javascript 如何判断其中一个radio被选中

JavaScript016

Javascript 如何判断其中一个radio被选中,第1张

Javascript判断哪一个radio被选中,可以用jquery的选择器方便的找到和判断。

选择器的写法像这样$("[name=radio的name]:checked")。

这是针对此问题的测试页面。

1、这是html代码,有2个ratio,name都是"sex",值分别为"男"和"女"

男:

<input type="radio" name="sex" value="男" />

<br />

女:

<input type="radio" name="sex" value="女" />

<br/>

<br/>

<button id="button">

选中的性别是

</button>

2、在javascript代码中,绑定按钮事件,点击时用选择器判断哪个ratio选中并弹窗。

$(function() {

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

var val = $("[name=sex]:checked").val()

val = val || '未选中'

alert(val)

})

})

这是运行效果

思路:遍历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>