<style>
td:last-child{color: red; font-weight: bold;}
</style>
<table cellpadding="10" border="1px solid #ddd">
<tr>
<td>账号:</td>
<td><input id="numberid" type="text"></td>
<td width="200" id="numberid1"></td>
</tr>
<tr>
<td>密码:</td>
<td><input id="pas" type="password" ></td>
<td id="pas1"></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
</td>
<td id="sex1"></td>
</tr>
<tr>
<td>选修：</td>
<td>
<input type="checkbox" name="xk" value="HTML" />HTML
<input type="checkbox" name="xk" value="CSS" />CSS
<input type="checkbox" name="xk" value="JavaScript" />JavaScript
</td>
<td id="xk1"></td>
</tr>
<tr>
<td colspan="3" align="center"><input id="btn" type="button" value="提交"></td>
</tr>
</table>
<script>
window.onload=function(){
var numberid=document.getElementById("numberid");
var numberid1=document.getElementById("numberid1");
var pas=document.getElementById("pas");
var pas1=document.getElementById("pas1")
var sex=document.getElementsByName("sex");
var sex1=document.getElementById("sex1");
var xk=document.getElementsByName("xk");
var xk1=document.getElementById("xk1");
var btn=document.getElementById("btn")
btn.onclick=function(){
//判断账号是否为空
if(!numberid.value){
numberid1.innerHTML="账号未填写";
}
//判断密码是否为空
if(!pas.value){
pas1.innerHTML="密码未填写";
}
//判断性别是否为空
var sexbox;
for(var i=0;i<sex.length;i++){
if(sex[i].checked==true){
sexbox=sex[i].value;
break;
}
}
if(!sexbox){
sex1.innerHTML="性别未选择";
}
//判断选修是否为空
var xkbox=[];
for (var i=0;i<xk.length;i++) {
if(xk[i].checked==true){
xkbox+=xk[i].value;
}
}
if(xkbox.length==0){
xk1.innerHTML="选修未选择"
}
}
}
</script>
