js获取单选框选中的值

前言

在网上查的很多资料都是用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);
    }
}