Как проверить, проверена ли хотя бы одна радиокнопка

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() возвращает истинные, ложные или неопределенные, поэтому проверка истины без .length работ. Кроме того, вам необходимо перераспределить это условное значение, чтобы пересечь дерево домика в контейнер (или форму), а затем искать в нем братьев и сестер.

Заменить это: if ($(this).is(':checked').length > 0) {

с этим: if ($(this).parents('.questions').find('input[type="radio"]').is(':checked')) {

Основываясь на вашем примере, я не уверен, что если вам нужно подправить .parents() или .find() селекторы. Возможно, вам придется сделать их более конкретными, чтобы придерживаться групп радиостанций (а не находить все радиостанции). Вот демонстрационная версия, посмотрите на консоль и проверите ее с ошибкой: https://jsfiddle.net/jpnaccn3/