直接看代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tp study</title>
<script>
function check() {
var user=document.getElementsByName('user');
var sex=document.getElementsByName('sex');
var hobby=document.getElementsByName('hobby[]');
var getuser=user[0].value;
console.log(getuser);
var getsex;
for(var i=0; i<sex.length;i++){
if(sex[i].checked){
getsex=sex[i].value;
}
}
console.log(getsex);
var gethobby=[];
for(var j=0; j<hobby.length; j++){
if(hobby[j].checked){
gethobby[j]=hobby[j].value;
}
}
console.log(gethobby);
if(getuser && getsex && gethobby.length){
return true;
}
return false;
}
</script>
</head>
<body>
<form action="doaction.php" method="post" onsubmit="return check();">
姓名 <input type="text" id="user" name="user"><br>
性别 <input type="radio" class="sex" name="sex" value="男">男
<input type="radio" class="sex" name="sex" value="女">女<br>
爱好 <input type="checkbox" class="hobby" name="hobby[]" value="吃">吃
<input type="checkbox" class="hobby" name="hobby[]" value="喝">喝
<input type="checkbox" class="hobby" name="hobby[]" value="玩">玩
<input type="submit" name="submit" value="提交">
</form>
</body>
</html>
doaction.php 的代码就是直接打印post传递过来的值。
这里说明两点。
一点是js按照name获取标签元素时，是一个数组，对input元素的type值不是radio、checkbox时，可以直接按下标0存取，然后是它们时，必须遍历后才能获取所有的值。
第二点是js对真值和假值的判断，在js中除了undefine、null、' '、NaN、0、false这六种外，其余都是真值，比如空对象、空数组、正则、函数等。特别注意 '0'、'null'、'false'、{}、[]也都是真值。所以上面代码对gethobby的判断，我用了gethobby.length去表示复选框有选择值。
然后js阻止转跳的帖子在这里。js阻止表单的转跳。
大体就是这样，有错误的话欢迎来交流，