title: How to check if at least one radio button is checked
body: <p>I'm actually stuck on my form validation because I want to check if there is at least one radio button checked. I did this for my text input validation successful but for the radio buttons it doesn't work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#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 &gt; 0) {
          } else {
              $(this).closest('.questions').find('.error').css("visibility","visible");
              $(this).closest('.questions').find('.error').text('This field is required.');
              isValid = false;
          }
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="field goals-icon goals"&gt;
      &lt;span class="title"&gt;Some Text&lt;/span&gt;
      &lt;div class="questions"&gt;
          &lt;div class="questions-fc-1 questions-fcm-2 radio-button"&gt;
              &lt;input id="muscle-goal_1" name="goal" class="goal" value="1" aria-required="true" type="radio"&gt;
              &lt;label id="fc-goal_1" aria-controls="#muscle-goal_1"&gt;
                  &lt;img src="" alt=""&gt;
                  &lt;span&gt;Some Text&lt;/span&gt;
                      &lt;div class="error"&gt;&lt;/div&gt;&lt;!--This is my error class which should be visible if there is no checkbox from this section checked--&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="questions-fc-1 questions-fcm-2 radio-button"&gt;
              &lt;input id="weight-loss-goal_2" name="goal" class="goal" value="2" aria-required="true" type="radio"&gt;
              &lt;label id="fc-goal_2" aria-controls="#weight-loss-goal_2"&gt;
                  &lt;img src="" alt=""&gt;
                  &lt;span&gt;Some Text&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="questions-fc-1 questions-fcm-2 radio-button"&gt;
              &lt;input id="figure-workout-goal_3" name="goal" class="goal" value="3" aria-required="true" type="radio"&gt;
              &lt;label id="fc-goal_3" aria-controls="#figure-workout-goal_3"&gt;
                  &lt;img src="" alt=""&gt;
                  &lt;span&gt;Some Text&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="questions-fc-1 questions-fcm-2 radio-button"&gt;
              &lt;input id="health-goal_4" name="goal" class="goal" value="4" aria-required="true" type="radio"&gt;
              &lt;label id="fc-goal_4" aria-controls="#health-goal_4"&gt;
                  &lt;img src="" alt=""&gt;
                  &lt;span&gt;Some Text&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div type="next" id="next" class="forward-button"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>