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

时间:2017-11-28 18:22:54

标签: javascript php jquery html

我想检查是否已检查所有单选按钮,是否使用警告消息。警报消息有效但无论如何都会发送到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>

2 个答案:

答案 0 :(得分:0)

您需要绑定提交事件处理程序,而不是理想地说单击提交按钮,并阻止表单的默认行为。

&#13;
&#13;
$(document).ready(function() {
  $("#quiz").on('submit', function(e) {
    var totalRadio = $(":radio").length;
    if ($('radio:checked').length !== totalRadio) {
      alert("not all checked");
      e.preventDefault();
    }
  });
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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

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