使用JavaScript获取radio被选中的值
作者:Miao 阅读:3674次
在日常工作中,单选是比较常见的;用到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>
本站部分文章、数据、素材收集于网络,所有版权均归源网站或原作者所有!
如果侵犯了您的权益,请来信告知我们下线删除,邮箱:357234902@qq.com
上一篇:js添加或删除class类名