检查是否选择了所有单选按钮

Question

我想检查是否所有单选按钮都被选中，如果不使用警报消息。警报消息有效，但无论如何它都会在没有选定字段的情况下发送到 answers.php。如果警报为真，如何执行该表单操作将不起作用？谢谢你。

count.js

$(document).ready(function () {
    var names = {};
    $(':radio').each(function () {
        names[$(this).attr('name')] = true;
    });
    var count = 0;
    $.each(names, function () {
        count++;
    });


    $("#qSubmit").click(function () {
        if ($(':radio:checked').length !== count) {

            alert("not all checked");
        }

    });
});

form.php

$(document).ready(function () {
    var names = {};
    $(':radio').each(function () {
        names[$(this).attr('name')] = true;
    });
    var count = 0;
    $.each(names, function () {
        count++;
    });


    $("#qSubmit").click(function () {
        if ($(':radio:checked').length !== count) {

            alert("not all checked");
        }

    });
});

<form action="bbb.php" method="post" id="quiz" style="margin-top:100px;" >
        <?php

while ($row = $result2->fetch_assoc()) {

    echo '<div class="row">';
    echo '<div class="col-md-8 col-sm-8 col-xs-12">';
    echo '<div class="borderis">' . $row['question'] . '</div><br>';
    $i++;

    echo '<fieldset id="group">';

    echo '<label for="' . $row['answer1'] . '"><input type="radio" id="' . $row['answer1'] . '"name="answers' . $i . '" value="' . $row['answer1'] . '"> <bled></bled>
            <span>' . $row['answer1'] . '</span></label>' . '<br>';

    echo '<label for="' . $row['answer2'] . '"><input type="radio" id="' . $row['answer2'] . '"name="answers' . $i . '" value="' . $row['answer2'] . '"> <bled></bled>
            <span>' . $row['answer2'] . '</span></label>' . '<br>';

    echo '<label for="' . $row['answer3'] . '"><input type="radio" id="' . $row['answer3'] . '"name="answers' . $i . '" value="' . $row['answer3'] . '"> <bled></bled>
            <span>' . $row['answer3'] . '</span></label>' . '<br>';

    echo '<label for="' . $row['answer4'] . '"><input type="radio" id="' . $row['answer4'] . '"name="answers' . $i . '" value="' . $row['answer4'] . '"> <bled></bled>
            <span>' . $row['answer4'] . '</span></label>' . '<br>';

    echo '</fieldset>';
    echo '</div></div>';
}

?>
<input type="submit" value="Pateikti atsakymus" name="result" class="qSubmit" id="qSubmit" />
</form>

Answer 1

您需要阻止提交表单的按钮的默认操作

$("#qSubmit").click(function(event) {
  if ($(':radio:checked').length !== count) {
    // prevent submit
    event.preventDefault();
    alert("not all checked");
  }
});

Answer 2

您需要绑定提交事件处理程序，而不是理想情况下的提交按钮点击，并防止表单的默认行为。

$(document).ready(function() {
  $("#quiz").on('submit', function(e) {
    var totalRadio = $(":radio").length;
    if ($('radio:checked').length !== totalRadio) {
      alert("not all checked");
      e.preventDefault();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="bbb.php" method="post" id="quiz" style="margin-top:100px;">
  Check 1<input type="radio" name="input1"> Check 1<input type="radio" name="input2"> Check 1<input type="radio" name="input3"> Check 1<input type="radio" name="input4"> Check 1<input type="radio" name="input5"> Check 1<input type="submit" value="Pateikti atsakymus"
    name="result" class="qSubmit" id="qSubmit" />
</form>