js获取单选框和复选框的值并判断值存在后允许转跳

直接看代码。

<!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阻止表单的转跳。

大体就是这样，有错误的话欢迎来交流，

posted @ 2017-03-12 18:13  木呆先生  阅读(1153)  评论(0)  编辑  收藏  举报