javascript - 满足if条件后，为什么还要进行其他操作？

我正在遵循表单的HTML代码：

<form name="question_issue_form" id="question_issue_form" action="question_issue.php">
          <table class="trnsction_details" width="100%" cellpadding="5">
            <tbody>
              <tr>
                <td></td>
                <td>
                  <input type="checkbox" name = "que_issue[]" value = "Question is wrong" id ="chkQueWrong">Question is wrong</input>
                </td>
              </tr>
              <tr>
                <td></td>
                <td><input type="checkbox" name = "que_issue[]" value = "Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td>
              </tr>
              <tr>
                <td></td>
                <td><input type="checkbox" name = "que_issue[]" value = "Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>
              </tr>
              <tr>
                <td></td>
                <td><input type="checkbox" name = "que_issue[]" value = "Other" id ="chkOther">Other</input></td>
              </tr>
              <tr>
                <td></td>
                <td class="set_message" style="display:none;"><textarea name="que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>
              </tr>
              <tr>
                <td></td>
                <td><input type="submit" name="submit" value="Submit" id="report_question_issue"/></td>
              </tr>
            </tbody>
          </table>
        </form>

我想在提交表单之前验证表单，以便从上述所有复选框中至少选中一个复选框，并且当选中值为“ Other”的复选框时，文本区域不应为空白。为此，我尝试了以下代码，但是即使选中了一个或多个复选框，它仍显示警报。此外，文本区域验证也无法正常工作。有人可以在提交表单之前帮助我更正此验证码吗？如果引发单个错误，则不应提交表单。以下是我尝试过的jQUery代码。

$(document).ready(function () {
  $('#chkOther').click(function () {
      $('.set_message').toggle(this.checked);
  });

  //This function is use for edit transaction status
  $(document).on('click', '#report_question_issue', function (e) {

      e.preventDefault();

      //$.colorbox.close();

      //for confirmation that status change
      var ans = confirm("Are you sure to report the question issue over?");
      if (!ans) { //alert("Yes its false");
          return false;
      }

      var post_url = $('#post_url').val();

      var checkbox = document.getElementsByName("que_issue[]");

      var checkedAtLeastOne = false;

      $('input[type="checkbox"]').each(function () {
          if ($(this).is(":checked")) { alert("In If");
              //atleast one is checked
              checkedAtLeastOne = true;
          } else { alert("In Else");
              //error
              alert("Check at least one checkbox");
          }

          var other = document.getElementById("chkOther");
          var textfield = document.getElementByName("que_issue_comment");
          if ($(other).is(":checked")) {
              if ($(textfield).val().length == 0) {
                  //error
                  alert("Fill in the textarea");
              }
          }
      });

      $.ajax({
          type: "POST",
          url: post_url,
          data: $('#question_issue_form').serialize(),
          dataType: 'json',
          success: function (data) {
              alert("The values have been inserted");
          }
      });
  });
});

最佳答案

您的if条件是检查页面中的每个复选框。这就是为什么要转到其他部分并警告Check at least one checkbox的原因。为避免这种情况，请尝试以下代码，

$(document).ready(function() {
    $('#chkOther').click(function() {
        $('.set_message').toggle(this.checked);
    });
    //This function is use for edit transaction status
    $(document).on('click', '#report_question_issue', function(e) {
        var submit = true;
        e.preventDefault();
        //$.colorbox.close();
        //for confirmation that status change
        var ans = confirm("Are you sure to report the question issue over?");
        if (!ans) { //alert("Yes its false");
            submit = false;
        }
        var post_url = $('#post_url').val();
        var checkbox = document.getElementsByName("que_issue[]");
        var checkedAtLeastOne = false;
        $('input[type="checkbox"]').each(function() {
            if ($(this).is(":checked")) {
                checkedAtLeastOne = true;
                return false; //to break from each()
            }
        });
        if (checkedAtLeastOne) {
            //alert("In If");
            var other = $("#chkOther");
            var textfield = $("[name=que_issue_comment]");
            if (other.is(":checked")) {
                if ($.trim($(textfield).val()).length == 0) {
                    //error
                    alert("Fill in the textarea");
                    submit = false;
                }
            }
        }
        else {
            alert("Check at least one checkbox");
            submit = false;
        }
        if (submit) {
            $.ajax({
                type: "POST",
                url: post_url,
                data: $('#question_issue_form').serialize(),
                dataType: 'json',
                success: function(data) {
                    alert("The values have been inserted");
                }
            });
        }
        else {
            alert("Fix the error");
        }
    });
});

Fiddle