【前端】js判断单复选框选择了第几个

最新推荐文章于 2017-07-25 23:50:28 发布

flying_wind2008

最新推荐文章于 2017-07-25 23:50:28 发布

阅读量738

点赞数

分类专栏： web前端文章标签： input function html

本文链接：https://blog.csdn.net/flying_wind2008/article/details/6743402

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

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" οnclick="check()"><br><br>
<select id="xueli" οnchange="check2()">
	<option>高中</option>
	<option>专科</option>
	<option selected="selected">本科</option>
	<option>硕士以上</option>
</select>
<input type="submit" οnclick="check2()"><br> 
<select id="xueli3" οnchange="check3(this)">
	<option>高中</option>
	<option>专科</option>
	<option selected="selected">本科</option>
	<option>硕士以上</option>
</select> 
<input type="submit" οnclick="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>