当前位置:首页 > 前端开发 > javascript > 正文内容

使用JavaScript获取radio被选中的值

Miao2个月前 (09-27)javascript90

在日常工作中,单选是比较常见的;用到getElementsByName(name)方法,查询元素的name属性,和getElementById()相似,这里就以是否注射新冠疫苗写个小例子:

HTML

<label for="i1"><input type="radio" name="r1" id="i1" value="未接种" />未接种</label>
<label for="i2"><input type="radio" name="r1" id="i2" value="部分接种" />部分接种</label>
<label for="i3"><input type="radio" name="r1" id="i3" value="接种完成" />接种完成</label>

javascript

var r = document.getElementsByName("r1");
for (let i = 0; i < r.length; i++) {
    if (r[i].checked == true) {
        // 当前是被选中的,r[i].value是被选中的值,赋值给指定参数就是了。
        this.checked = r[i].value;
    }
}

拓展
1.判断是否有选项被选中,次判断用于不设定默认值场景使用

if(r[0].checked == false && r[1].checked == false && r[2].checked == false){
    alert("请选择新冠疫苗注射情况!");
    return false;
}

2.配合label使用,可增加用户可操作性,方便使用;label的for属性和input的id绑定,点击label即触发input。

<label for="i1"><input type="radio" name="r1" id="i1" value="未接种" />未接种</label>
<label for="i2"><input type="radio" name="r1" id="i2" value="部分接种" />部分接种</label>
<label for="i3"><input type="radio" name="r1" id="i3" value="接种完成" />接种完成</label>

扫描二维码推送至手机访问。

版权声明:本文由Miao发布,版权归作者所有,如需转载请注明出处。

本文地址:https://www.wmlike.com/?id=50

分享给朋友:

相关文章

25个正则表达式,让代码效率提高80%

在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。在日常开发中,了解一些常用的正则表达式,能大大提高你的工作效率,今天就给大家分享25个开发...

js动态修改页面标题title

业务场景:跳转页面后,获取后台数据后更改标题! <!DOCTYPE html> <html> <head> <meta cha...

js数组去重的几种方法

includes去重arr.includes(指定元素(必填),指定索引值(可选,默认值为0)),有值返回true,没有则返回false。 let arr = [-2, 1, 9, -3, -2,...

js添加或删除class类名

通常通过js方法给div进行class类名的添加或者删除,比较常见的就是tab切换了,下面就来具体讲一下如何使用js进行操作,最后会附上完整实例代码: <div class="...

js对url进行编码和解码的方式

1、escape 和 unescapeescape 方法 对String对象进行编码,以便他们能够在所有计算机上可读。对除ASCII字母、数字、标点符号 @ * _ + - . /...

javascript实现年月日三级联动

html <select name="year"></select> <select name="month"><...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。