javascript - 检查是否已选中每个字段集的一个单选按钮

Question

我有一个包含 10 个字段集的表单。

我希望能够检查提交表单时，每个字段集都选择了一个单选按钮。

我搜索过类似的帖子，并尝试了大部分/所有答案，但没有成功，所以想知道是否有人可以就我出错的地方提供一些建议？

html 示例:

    <div class="questions">
      <fieldset>
        <h2>If you could have any superpower, what would it be? </h2>
        <div class="row question9">
            <label for="Q9A1" class="Q9 A1">
              <input type="radio" class="styled" id="Q9A1" value="Q9A1" name="Q9">
              Flight </label>
            <label for="Q9A2" class="Q9 A2">
              <input type="radio" class="styled" id="Q9A2" value="Q9A2" name="Q9">
              Super speed </label>
            <label for="Q9A3" class="Q9 A3">
              <input type="radio" class="styled" id="Q9A3" value="Q9A3" name="Q9">
              X­ray vision </label>
            <label for="Q9A4" class="Q9 A4">
              <input type="radio" class="styled" id="Q9A4" value="Q9A4" name="Q9">
              Super strength </label>
            <label for="Q9A5" class="Q9 A5">
              <input type="radio" class="styled" id="Q9A5" value="Q9A5" name="Q9">
              See into the future </label>
        </div>
    </fieldset>
<div>
<div class="questions">
    <fieldset>
        <h2>If you could have any superpower, what would it be?</h2>
        <div class="row question10">
            <label for="Q10A1" class="Q10 A1">
              <input type="radio" class="styled" id="Q10A1" value="Q10A1" name="Q10">
              Flight </label>
            <label for="Q10A2" class="Q10 A2">
              <input type="radio" class="styled" id="Q10A2" value="Q10A2" name="Q10">
              Super speed </label>
            <label for="Q10A3" class="Q10 A3">
              <input type="radio" class="styled" id="Q10A3" value="Q10A3" name="Q10">
              X­ray vision </label>
            <label for="Q10A4" class="Q10 A4">
              <input type="radio" class="styled" id="Q10A4" value="Q10A4" name="Q10">
              Super strength </label>
            <label for="Q10A5" class="Q10 A5">
              <input type="radio" class="styled" id="Q10A5" value="Q10A5" name="Q10">
              See into the future </label>
        </div>
    </fieldset>
</div>

这就是我使用 jQuery 的地方:

$("#submit").on('click', function(){
        var flag;
        $('.questions')
            .each(function(){
                flag = false;
                if(!$('.question10 input[type="checkbox"]' .is(':checked'))
                return false;
                flag = true;
        });
        if (flag)
            alert("submitted");
        else
            alert("Not submitted");
    });

Answer 1

我认为你可以简单地做到这一点:

$('#submit').on('click', function() {
    var flag = true;

    $('.questions').each(function() {
        if ($(this).find(':checkbox:checked').length == 0) {
            flag = false;
            return false;
        }
    });

    if (flag)
        alert("submitted");
    else
        alert("Not submitted");
});

尝试一下，如果有帮助请告诉我!

编辑:

如果您使用单选按钮，因为每个问题只能检查一个，另一种方法是:

$('#submit').on('click', function() {
    var totalQuestions = $('.questions').length;
    var totalAnswers = $('.questions').find(':radio:checked').length;

    if (totalQuestions == totalAnswers)
        alert("submitted");
    else
        alert("Not submitted");
});