JS中获取页面单选框radio和复选框checkbox中选中的值
程序员文章站
2022-05-09 13:07:24
...
设计一个在线调查的表单页面（含有单选、多选项），当用户单击提交按钮时将显示一个对话框显示用户的选择结果。执行效果如下图所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
function check(){
var checkradio=document.getElementsByName("useradio");
var selectvalue=0; //selectvalue为radio中选中的值
for(var i=0;i<checkradio.length;i++) {
if(checkradio[i].checked) {
selectvalue=checkradio[i].value;
}
}
//alert("您感觉本站"+selectvalue);
var checkbox=document.getElementsByName("usecheckbox");
var svalue=" "; //selectvalue为radio中选中的值
for(var i=0;i<checkbox.length;i++) {
if(checkbox[i].checked) {
svalue=svalue+checkbox[i].value+" ";
}
}
alert("您感觉本站 "+selectvalue+"\n"+"您希望本站出现以下栏目:"+svalue); //换行
}
</script>
</head>
<body>
<p style="text-align: center; font-size: 24px;">在线调查</p>
<p style="text-align: center">您感觉本站的主页效果如何（单选）：</p>
<p style="text-align: center">
<input type="radio" name="useradio" id="checkradio1" value="非常好">
<label for="radio1">非常好 </label>
<input type="radio" name="useradio" id="checkradio2" value="好">
<label for="radio2">好 </label>
<input type="radio" name="useradio" id="checkradio3" value="一般">
<label for="radio3">一般</label>
</p>
<p style="text-align: center">您希望本站出现以下栏目（多选）：</p>
<p style="text-align: center">
<input type="checkbox" name="usecheckbox" id="checkbox1" value="新闻">
<label for="checkbox1">新闻</label>
<input type="checkbox" name="usecheckbox" id="checkbox2" value="娱乐">
<label for="checkbox2">娱乐</label>
<input type="checkbox" name="usecheckbox" id="checkbox3" value="教育">
<label for="checkbox3">教育</label>
</p>
<p style="text-align: center">
<input type="button" id="button" onClick="check()" value="提交">
</p>
<p style="text-align: center"> </p>
</body>
</html>