【前端】js判断单复选框选择了第几个_判断复选框是第几个-优快云博客

本文链接：https://blog.youkuaiyun.com/flying_wind2008/article/details/6743402

本文提供了一个HTML代码实例，展示了如何使用单复选框和下拉选择来收集用户输入，并通过JavaScript进行交互操作。包括获取用户选择并显示结果的流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单中的单复选框选择，经常会用到的。带有详细注释，有需要拿去。

html代码：

<body>
<input type="radio" name="aihao" value="游泳" checked="checked"/>游泳
<input type="radio" name="aihao" value="跳绳" />跳绳
<input type="radio" name="aihao" value="潜水" />潜水
<input type="radio" name="aihao" value="网球" />网球
<input type="radio" name="aihao" value="篮球" />篮球
<input type="radio" name="aihao" value="唱歌" />唱歌
<input type="submit" onclick="check()"><br><br>
<select id="xueli" onchange="check2()">
	<option>高中</option>
	<option>专科</option>
	<option selected="selected">本科</option>
	<option>硕士以上</option>
</select>
<input type="submit" onclick="check2()"><br> 
<select id="xueli3" onchange="check3(this)">
	<option>高中</option>
	<option>专科</option>
	<option selected="selected">本科</option>
	<option>硕士以上</option>
</select> 
<input type="submit" onclick="check3()"><br> 
</body>

js代码（尤其注意check2 和check3的区别）：

<script>
function check(){
	var a = document.getElementsByName("aihao"); //注意取出来的是所有name为"aihao"的集合
	for(i = 0;i<a.length;i++){ //循环扫描，长度a.length就是刚才集合的个数
		if(a[i].checked){ //判断是否为选中项
			alert("您选择的是第"+(i+1)+"个选项："+a[i].value)
		}	
	}
}
function check2(){
	var s = document.getElementById("xueli");
	si = s.selectedIndex; //之前这个属性用的少，它可以直接找到所选的option的索引号
	alert(s.options[si].innerHTML) //输出索引为si的option的内容
}

function check3(oSel){  //注意这个是带有参数的哦！
	alert(oSel.innerHTML) //输出的是<select>的innerHTML:<option value="1">高中</option><option value="2">专科</option><option selected="selected" value="3">本科</option><option value="4">硕士以上</option>
	alert(oSel.value) //输出的是点击的option的option的value，注意跟上面innerHTML的区别
}
</script>