Question

我想用“！”显示一个红色圆圈取消选中单选按钮时，选中两个单选按钮时显示绿色圆圈。之后我使用一个函数根据红色/绿色圆圈提交或不提交按钮。

我已经尝试了许多方法来纠缠代码，但是当它检查任何想法时它不想显示绿色圆圈？

PS：

span3（红色圆圈）

span2（绿色圆圈）

基本上我想通过js而不是php来进行表单验证...

HTML：

<label id="labelage">Age:</label>
<br>
<input type="radio" id="under_13" value="under_13" name="age">
<label for="under_13" class="light">Under 13</label>
<input type="radio" id="over_13" value="over_13" name="age">
<label for="over_13" class="light">13 or Older</label>
<div class="break"></div>

<div id="borderlabel">

  <label id="labelage1">Gender:</label>
  <input type="radio" id="male" value="male" name="gender">
  <label for="male" class="light1">Male</label>

  <input type="radio" id="female" value="female" name="gender">
  <label for="female" class="light1">Female</label>

</div>
....
<button type="submit" id="signupb" name="register">Sign up
  <div class="span3">!</div>
  <div class="span2">✔</div>
</button>

的JavaScript

$(".span1").hide();
$(".span2").hide();
$(".span3").hide();


function submit() {
  if (!$('#male').is(':checked') || !$('#female').is(':checked')) {
    $(".span3").show();
  } else {
    if (!$('#under_13').is(':checked') || !$('#over_13').is(':checked')) {
      $(".span3").show();
    } else {
      $(".span2").show();
    }
  }
}

$("#signupb").on("mouseover", submit);

Answer 1

你的逻辑关闭
让电台点击也更新！
请勿拨打submit
无论如何点击

试试这个：

function checkRad() {
  var ok = ($('#male').is(':checked') || $('#female').is(':checked')) && 
              ($('#under_13').is(':checked') || $('#over_13').is(':checked'))
  $(".span3").toggle(!ok);
  $(".span2").toggle(ok);
  return ok;
}

$(function() {
  $(".span1").hide();
  $(".span2").hide();
  $(".span3").hide();
  $("#signupb").on("mouseover", checkRad)
  .on("click", function(e) {
     if (!checkRad()) e.preventDefault();
  })

  $("input[type=radio]").on("click", function() {
    checkRad();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label id="labelage">Age:</label>
<br>
<input type="radio" id="under_13" value="under_13" name="age">
<label for="under_13" class="light">Under 13</label>
<input type="radio" id="over_13" value="over_13" name="age">
<label for="over_13" class="light">13 or Older</label>
<div class="break"></div>

<div id="borderlabel">

  <label id="labelage1">Gender:</label>
  <input type="radio" id="male" value="male" name="gender">
  <label for="male" class="light1">Male</label>

  <input type="radio" id="female" value="female" name="gender">
  <label for="female" class="light1">Female</label>

</div>
....
<button type="submit" id="signupb" name="register">Sign up
  <div class="span3">!</div>
  <div class="span2">✔</div>
</button>

Answer 2

我建议使用jQuery Validation插件
为每个输入元素分配ID是不好的做法，使代码难以维护。考虑按name属性访问元素。
考虑添加服务器端验证以及浏览器错误/恶意用户。

将submit()功能更改为：

function validateForm() {
    $(".span2").hide();
    $(".span3").hide();

    var isError = false;
    if (!$('#male').is(':checked') && !$('#female').is(':checked')) {
        isError = true
    } else if (!$('#under_13').is(':checked') && !$('#over_13').is(':checked')) {
        isError = true;
    }

    if(isError){
        $(".span3").show();
    } else {
        $(".span2").show();
    }
}

$("#signupb").on("mouseover", validateForm);

DEMO

检查单选按钮时发出问题

2 个答案: