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

我有一个包含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>

---

我认为你可以简单地做到：

$('#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");
});

---

您也可以为此尝试以下方法：

$(document).ready(function() {
    $("#submit").click(function(){
    var flag;
    $('.questions').each(function(){
        flag = false;
      var groupName = $(this).find("input[type='radio']:first").attr('name');
      var answer = $("input[name="+ groupName +"]:checked").val();
      if(typeof answer != "undefined" && answer != "undefined"){
        flag = true;
      }
      else
      {
        flag = false;
        return false;
      }
    });  
    if(flag == false){
        alert("Please select all the answers");
    }
    else{
     alert("all the answers are selected");
    }
    });
});

---

太好了。我刚刚注意到我的原始脚本中有一个错误，我在引用复选框时，它们实际上是无线电。使用您的答案并将复选框更改为“收音机”已为我解决了此问题！我用另一个解决方案编辑了我的答案，你可以选择更适合你的。很高兴这有帮助！

$(document).ready(function() {
    $("#submit").click(function(){
    var flag;
    $('.questions').each(function(){
        flag = false;
      var groupName = $(this).find("input[type='radio']:first").attr('name');
      var answer = $("input[name="+ groupName +"]:checked").val();
      if(typeof answer != "undefined" && answer != "undefined"){
        flag = true;
      }
      else
      {
        flag = false;
        return false;
      }
    });  
    if(flag == false){
        alert("Please select all the answers");
    }
    else{
     alert("all the answers are selected");
    }
    });
});