<script>
window.onload = function(){
//通过名字获取  getElementsByName
//var obj = document.getElementsByName("fruit");
//通过标签获取  getElementsByTagName
var obj = document.getElementsByTagName("input");
    for(var i=0; i<obj.length; i ++){
        if(obj[i].checked){
            alert(obj[i].value);
        }
    }
}
 
</script>
 
<form>
<input type="radio"  name ="fruit" value="apple" checked>苹果
<input type="radio"  name ="fruit" value="banana">香蕉
<input type="radio"  name ="fruit" value="pear">梨
</form>

知识点：

1，通过元素的名字获取元素列表

var obj = document.getElementsByName("fruit");

2，通过标签的名字获取元素列表

var obj = document.getElementsByTagName("input");

3，是否选中

obj[i].checked;

4，单选框里面的值

obj[i].value;

前言

在网上查的很多资料都是用JQuery获取，但是我觉得应该直接用js就可以实现这个功能。

网上有一些用js实现的是使用window.load=function(){...}，在页面加载时就调用函数去获取。但是会发现它仅仅在页面最初加载时读取到默认的checked值，当选中项发生改变时，它不会再去获取，不符合我的期望。

后面尝试获取input的DOM元素，在元素的onchange函数中获取选中值，不过也不行。因为当它由被选中转变为未选中状态时，onchange方法不会被调用；只能在它由未选中状态转变为被选中状态时才会调用，才能获取值。

最后我的解决方案如下。

代码

html

需要把两个单选的input放进一个表单控件里面

           <form id="toolForm">
                <input type="radio" name="tool" checked="checked" value="pencil" id="pencil">画笔
                <br/>
                <input type="radio" name="tool" value="eraser" id="eraser">橡皮
            </form>

js

// 获取表单
const toolForm=document.getElementById("toolForm");

// 表单内选中的项发生改变时会调用该方法
toolForm.onchange=function () {
    //这里得到name为tool的元素数组
    const tools = document.getElementsByName("tool");
    for (let i = 0; i <tools.length ; i++) {
        if(tools[i].checked) console.log(tools[i].value);
    }
}