如何检查是否至少有一个单选按钮被选中

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/