表单中的单复选框选择,经常会用到的。带有详细注释,有需要拿去。
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>