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>