为什么即使在满足 if 条件后它也会进入 else 部分？

Question

我有一个表单的 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>

我想在提交表单之前验证表单，使得从所有上面的上述复选框中检查至少一个复选框，并且当检查具有值“其他”的复选框时，则文本区域不应该是空白的。为此，我尝试了以下代码，但即使在选择一个或多个复选框后它也会显示警报。此外，文本区域验证也无法正常工作。任何人都可以在提交表单之前帮助我更正此验证码吗？如果抛出单个错误，则表单不应提交。以下是我尝试过的 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");
          }
      });
  });
});

Answer 1

if 语句被执行多次，每个复选框执行一次。即使已选中另一个复选框，您也会看到每个未选中复选框的警报。你需要彻底改变逻辑；遍历它们以寻找选中的复选框，并在找到后立即停止迭代。

然后，在检查完所有这些后，确定是否需要显示警报。

Answer 2

您的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