使用原生JavaScript获取单选按钮radio的选中值

时间:2022-07-31 19:34:52

主要原理就是遍历所有的单选按钮,当某个单选按钮选中的时候,将它对应的值传递给我们赋值的参数,并且跳出遍历循环。

如果想知道如何使用jQuery来获取单选按钮的值,请点击这里

示例代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>获取单选按钮选中的值</title>
</head>
<body>
<label><input type="radio" name="sex" value="m" checked="checked"></label>
<label><input type="radio" name="sex" value="f"></label>
<button id="button">提交</button>
<script type="text/javascript">
window.onload = function(){
var val;
var sex = document.getElementsByName('sex');
var button = document.getElementById('button');
button.addEventListener('click',function(){
for(var i = 0; i < sex.length; i++){
if(sex[i].checked == true){
val = sex[i].value;
console.log(val);
break;
}
}
return val;
},false);
}
</script>
</body>
</body>
</html>

如果想知道如何使用jQuery来获取单选按钮的值,请点击这里