• 微信号:wumiao_357234902
您当前的位置:首页>web前端开发>JavaScript

使用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

标签:JavaScript