<head>
<meta charset="UTF-8">
<title>7.判断选项是否选中</title>
</head>
<body>
<div id="gender">
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">女
<input type="radio" name="gender" value="3">保密
</div>
<hr>
<div id="hobby">
<input type="checkbox" name="hobby" value="吃饭">吃饭
<input type="checkbox" name="hobby" value="睡觉">睡觉
<input type="checkbox" name="hobby" value="看书">看书
<input type="checkbox" name="hobby" value="电影">电影
</div>
<hr>
<div id="statue">
<select id="select" name="statue">
<option value="经理">经理</option>
<option value="副经理">副经理</option>
<option value="人事">人事</option>
<option value="职员" selected>职员</option>
</select>
</div>
<hr>
<div id="btn">
<input type="button" value="拿到单选框的值">
<input type="button" value="拿到多选框的值">
<input type="button" value="拿到下拉框的值">
</div>
<div id="show"></div>
</body>
<script>
/*拿到单选框的值*/
document.getElementById("btn").getElementsByTagName("input")[0].onclick=function () {
var genders= document.getElementById("gender").getElementsByTagName("input");
for (var i = 0; i <genders.length ; i++) {
if(genders[i].checked==true){
document.getElementById("show").innerHTML=genders[i].value;
}
}
}
/*拿到多选框的值*/
document.getElementById("btn").getElementsByTagName("input")[1].onclick=function () {
var hobbys= document.getElementById("hobby").getElementsByTagName("input");
var arr =[];
for (var i = 0; i <hobbys.length ; i++) {
if(hobbys[i].checked==true){
//document.getElementById("show").innerHTML=hobbys[i].value;
arr.push(hobbys[i].value);
}
}
document.getElementById("show").innerHTML=arr.join("<br>");
}
//拿到下拉框的值
document.getElementById("btn").getElementsByTagName("input")[2].onclick=function () {
var statues= document.getElementById("select").getElementsByTagName("option");
for (var i = 0; i <statues.length ; i++) {
if(statues[i].selected==true){
document.getElementById("show").innerHTML=statues[i].value;
}
}
}
</script>
浙公网安备 33010602011771号