如何檢查是否至少有一個單選按鈕被選中

Question

我實際上被困在我的表單驗證中，因爲我想檢查是否至少有一個單選按鈕被選中。我這樣做是爲了我的文本輸入驗證成功，但單選按鈕不起作用。

$('#next').click(function() { 
 
    var isValid = true; 
 
    $('.personal-informations, .gender, .goal').each(function(i, obj) { //.personal-informations are my text inputs in another section of my form and .gender and .goal are my radio button classes 
 
     if ($(this).val().trim() === '') { 
 
      $("html, body").animate({scrollTop: $('.progressbar-header').offset().top-100}, 250); 
 
      $(this).closest('.questions').find('.error').css("visibility","visible"); 
 
      $(this).css('border-color', "#B33C3D"); 
 
      $(this).closest('.questions').find('.error').text('Dies ist ein Pflichtfeld.'); 
 
      isValid = false; 
 
     } 
 
     if ($(this).is(':checked').length > 0) { 
 
     } else { 
 
      $(this).closest('.questions').find('.error').css("visibility","visible"); 
 
      $(this).closest('.questions').find('.error').text('This field is required.'); 
 
      isValid = false; 
 
     } 
 
    }); 
 
});

<div class="field goals-icon goals"> 
 
    <span class="title">Some Text</span> 
 
    <div class="questions"> 
 
     <div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
      <input id="muscle-goal_1" name="goal" class="goal" value="1" aria-required="true" type="radio"> 
 
      <label id="fc-goal_1" aria-controls="#muscle-goal_1"> 
 
       <img src="" alt=""> 
 
       <span>Some Text</span> 
 
        <div class="error"></div><!--This is my error class which should be visible if there is no checkbox from this section checked--> 
 
      </label> 
 
     </div> 
 
     <div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
      <input id="weight-loss-goal_2" name="goal" class="goal" value="2" aria-required="true" type="radio"> 
 
      <label id="fc-goal_2" aria-controls="#weight-loss-goal_2"> 
 
       <img src="" alt=""> 
 
       <span>Some Text</span> 
 
      </label> 
 
     </div> 
 
     <div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
      <input id="figure-workout-goal_3" name="goal" class="goal" value="3" aria-required="true" type="radio"> 
 
      <label id="fc-goal_3" aria-controls="#figure-workout-goal_3"> 
 
       <img src="" alt=""> 
 
       <span>Some Text</span> 
 
      </label> 
 
     </div> 
 
     <div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
      <input id="health-goal_4" name="goal" class="goal" value="4" aria-required="true" type="radio"> 
 
      <label id="fc-goal_4" aria-controls="#health-goal_4"> 
 
       <img src="" alt=""> 
 
       <span>Some Text</span> 
 
      </label> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div type="next" id="next" class="forward-button"></div>

Answer 1

.is()返回true，false或不確定的，所以檢查的真理，而不.length作品。此外，您需要重新設置該條件，以便將dom樹遍歷到容器（或表單），然後在其中查找同級。

替換此： if ($(this).is(':checked').length > 0) {

有了這個： if ($(this).parents('.questions').find('input[type="radio"]').is(':checked')) {

根據你的榜樣，我不知道你是否需要調整.parents()或.find()選擇。您可能需要使它們更加具體，以堅持無線電組（而不是查找所有無線電）。這裏是一個演示，看看控制檯，它會記錄驗證失敗：https://jsfiddle.net/jpnaccn3/