前言

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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐