使用JavaScript获取radio被选中的值

在日常工作中，单选是比较常见的；用到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>