版权声明：转载原创文章请以超链接形式请注明原文章出处，尊重作者，尊重原创！
恰饭广告
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
.big_box {
margin: auto;
width: 500px;
height: 400px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
//全选与全不选效果
function Choose(){
var All_checkbox = document.getElementsByName("choose");
//判断checkbox数组的第一个是否选中 true为选中
if(document.getElementsByName("clear")[0].checked==true){
//循环所有checkbox
for(var i=0;i<=All_checkbox.length;i++){
All_checkbox[i].checked=true;
}
}
else{
for(var i=0;i<=All_checkbox.length;i++){
All_checkbox[i].checked=false;
}
}
}
//Dom
function Dom(){
var myname=document.getElementById("name").value;
if(myname==""){
alert("名字不能为空");
}
var Major = document.getElementsByName("sub");
var subject = "";//定义一个空值 然后赋值给它
for(var j = 0; j<= Major.length -1; j++){
if(Major[j].checked == true){
subject = Major[j].value;
}
}
var All_checkbox = document.getElementsByName("choose");
var hobby = "";
for(var k = 0; k<= All_checkbox.length -1; k++){
if(All_checkbox[k].checked == true){
hobby = hobby+All_checkbox[k].value;
}
}
document.getElementById("result").innerHTML="名字："+myname+"<br />"+"所属专业："+subject+"<br />" + "兴趣爱好："+hobby;
}
</script>
</head>
<body>
<div class="big_box">
<table width="500">
<tbody>
<tr>
<td align="right">姓名</td>
<td colspan="3"><input type="text" id="name" style="width: 370px;height: 20px;"></td>
</tr>
<tr>
<td rowspan="3" align="right">所属专业</td>
<td><input type="radio" name="sub" value="网络工程">
网络工程</td>
<td><input type="radio" name="sub" value="软件开发">
软件开发</td>
<td><input type="radio" name="sub" value="商务营销">
商务营销</td>
</tr>
<tr>
<td><input type="radio" name="sub" value="汽车维修">
汽车维修</td>
<td><input type="radio" name="sub" value="机械制造">
机械制造</td>
<td><input type="radio" name="sub" value="冶金矿产">
冶金矿产</td>
</tr>
<tr>
<td><input type="radio" name="sub" value="林牧渔">
林牧渔</td>
<td><input type="radio" name="sub" value="建筑">
建筑</td>
<td> </td>
</tr>
<tr>
<td align="right">兴趣爱好</td>
<td><input type="checkbox" value="" onClick="Choose()" name="clear">
全选/全不选</td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="3"></td>
<td><input type="checkbox" name="choose" value="打篮球 ">
打篮球</td>
<td><input type="checkbox" name="choose" value="踢足球 ">
踢足球</td>
<td><input type="checkbox" name="choose" value="电子竞技 ">
电子竞技</td>
</tr>
<tr>
<td><input type="checkbox" name="choose" value="跑步 ">
跑步</td>
<td><input type="checkbox" name="choose" value="游泳 ">
游泳</td>
<td><input type="checkbox" name="choose" value="旅游 ">
旅游</td>
</tr>
<tr>
<td><input type="checkbox" name="choose" value="看书 ">
看书</td>
<td><input type="checkbox" name="choose" value="购物 ">
购物</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="确认" onClick="Dom()" style="width: 100px;height: 40px;"></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
<!-- 输出 -->
<p id="result"></p>
</div>
</body>
</html>
原文链接：https://www.idaobin.com/archives/233.html
让我恰个饭吧.ヘ(￣ω￣ヘ)
支付宝 ——————- 微信
恰饭广告
