前言

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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐