檢查是否已為每個字段設置一個單選按鈕

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");
});

Answer 2

您也可以嘗試以下方法：

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