radio是form表单中非常常用的一种表单元素，对于radio的操作中，都是利用radio的checked属性，都是对radio的checked属性做操作。获取radio的选中值时，遍历radio按钮项，找到被选中（checked）的状态的那个按钮，然后返回其值；给radio赋值时，找到对应的按钮项，将其checked属性置为true即可。
获取radio值
Method1 遍历radio集合
假如我们给定页面
<body>
<p>
<label for="DoorCt">Doors:
<input type="radio" name="DoorCt" value="twoDoor" checked=”true”οnclick="getValue()">Two
<input type="radio" name="DoorCt" value="fourDoor" οnclick="getValue()">Four
</label>
</p>
</body>
要获取其中的选中的按钮值，该怎么取呢？
1 按照name属性获取该radio的集合
2 遍历集合中的每一项元素
3 获取元素的checked属性，是否为true，为true，返回其value值
function getValue(){
// method 1
var radio = document.getElementsByName("DoorCt");
for (i=0; i<radio.length; i++) {
if (radio[i].checked) {
alert(radio[i].value)
}
}
}
这里使用alert(radio[i].value)是为了直观的效果，可以使用return radio[i].value 来返回value值。
细看一下getValue方法的实现。
var document.getElementsByName(“DoorCt”);
根据name属性，获取radio的集合，getElementsByName方法是document获取对象的三个方法之一，获取到的是集合。
紧接着 for (i=0;i<radio.length; i++) { 对集合中的元素开始遍历
if (radio[i].checked) { 遍历每一个元素时，检查一下元素的checked属性，是否为true，为true的，则是被选中的，将其值radio[i].value 值返回。
Method2 传递当前radio对象值
如果单选按钮仅是根据其值做一些页面选择切换的话，还可以更方便一些。
给每个单选项绑定一个onclick方法，给方法传值this。
<body>
<p>
<label for="DoorCt">Doors:
<input type="radio" name="DoorCt" value="twoDoor" οnclick="getValue(this)">Two
<input type="radio" name="DoorCt" value="fourDoor" οnclick="getValue(this)">Four
</label>
</p>
</body>
this代表的是当前对象，即当前的<input > 输入按钮
传到方法中之后
function getValue(obj) {
// method 2
var value = obj.value;
alert(value);
}
直接获取value属性就可以了。
看到这里，可不可以直接给getValue方法传递选中的value值呢，当然可以，直接传递value值，一步到位。
<body>
<p>
<label for="DoorCt">Doors:
<input type="radio" name="DoorCt" value="twoDoor" οnclick="getValue(this.value)">Two
<input type="radio" name="DoorCt" value="fourDoor" οnclick="getValue(this.value)">Four
</label>
</p>
</body>
<script>
function getValue(value){
// method2_1
alert(value);
}
</script>
给radio赋值
给radio按钮赋值跟取值差不多，都是利用radio的checked属性，将要赋值的按钮项的checked项置为true即可。
<body>
<p>
<label for="DoorCt">Doors:
<input type="radio" name="DoorCt" value="twoDoor" οnclick="getValue(this)">Two
<input type="radio" name="DoorCt" value="fourDoor" οnclick="getValue(this)">Four
</label>
</p>
</body>
<script>
function getValue(obj){
// method 2
var value = obj.value;
alert(value);
}
window.onload = function(){
var radio = document.getElementsByName("DoorCt");
radio[0].checked = true;
}
这里待页面加载完成后，执行window.onload事件，事件中选中单选按钮的第一项，将其checked值置为true，即默认选中了第一项。
今天的文章javascript 获取表单中radio选中值分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/32870.html
