Check for selected radio button

Question

I'm using this question to see what radio buttons I've checked and what I haven't but I cannot figure out what I'm doing wrong.

$(document).ready(function() {

  function isEmpty() {
    $('#main_form').find('input[type="radio"]').each(function() {
      var name = $(this).attr("name");
      if ($('input:radio[name="' + name + '"]:checked').val() === 'undefined') {
        $('input:radio[name="' + name + '"]:checked').parents('.form_field').find('.form_label').addClass('not_valid');
      }
    });
  }

  $("a").click(function(e) {
    e.preventDefault();
    isEmpty();
  })
});

.form_label.not_valid {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="main_form">
  <table>
    <tbody>
      <tr class="form_field radio_buttons">
        <th class="form_label">Your product</th>
        <td colspan="5">
          <input type="radio" name="your_product" id="your_product_1" value="Goods">
          <label class="label-style" for="your_product_1">Goods</label>
          <input type="radio" name="your_product" id="your_product_2" value="In-between/both">
          <label class="label-style" for="your_product_2">In-between/both</label>
          <input type="radio" name="your_product" id="your_product_3" value="Services">
          <label class="label-style" for="your_product_3">Services</label>
        </td>
      </tr>
      <tr class="form_field radio_buttons">
        <th class="form_label">Clients</th>
        <td colspan="5">
          <input type="radio" name="clients" id="clients_1" value="Businesses">
          <label class="label-style" for="clients_1">Businesses</label>
          <input type="radio" name="clients" id="clients_2" value="In-between/both">
          <label class="label-style" for="clients_2">In-between/both</label>
          <input type="radio" name="clients" id="clients_3" value="Customers">
          <label class="label-style" for="clients_3">Customers</label>
        </td>
      </tr>
    </tbody>
  </table>
</form>
<a href="#">click</a>

When I do a console.log($('input:radio[name="' + name + '"]:checked').val()) I get out, if I've checked the button the value of the group (3 times repeated), and undefined (3 times), if I don't select anything I get 6 times undefined. So if my logic is correct my labels should get the class not_valid and turn red. But I must be doing something wrong, my guess is something with the if condition. I just can't figure out what I'm missing here.

I want to make label red if the radio button group isn't selected.

Answer 1

By the comments:

1. $('input:radio[name="' + name + '"]:checked').val() === 'undefined' should be changed to $('input:radio[name="' + name + '"]').is(':checked') or something else. Currently it'll enter only if your checked radio have a value 'undefined'.

2. As you want to check there's no checked value given that name, and alter the class of its parents, you should use $('input:radio[name="' + name + '"]'), without that :checked, which makes the result an empty jquery object.

You can also do that all in by toggleClass, demo jsfiddle, by using these, if you check the not valid groups, you are able to remove the invalid class by click that check button again.

// Get name
var name = $(this).attr("name");
// Get ref so we don't need to retrieve it twice.
var $targets = $('input:radio[name="' + name + '"]');
//Find their parents, and toggle the class by check if the elements are checked or not.
$targets.parents('.form_field').find('.form_label').toggleClass('not_valid', !$targets.is(':checked'));

Altered origin code:

$(document).ready(function() {

  function isEmpty() {
    $('#main_form').find('input[type="radio"]').each(function() {
      var name = $(this).attr("name");
      
      // Check if the there's any radio with given name is checked.
      if (!$('input:radio[name="' + name + '"]').is(':checked')) {
        $('input:radio[name="' + name + '"]').parents('.form_field').find('.form_label').addClass('not_valid');
      }
    });
  }

  $("a").click(function(e) {
    e.preventDefault();
    isEmpty();
  })
});

.form_label.not_valid {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="main_form">
  <table>
    <tbody>
      <tr class="form_field radio_buttons">
        <th class="form_label">Your product</th>
        <td colspan="5">
          <input type="radio" name="your_product" id="your_product_1" value="Goods">
          <label class="label-style" for="your_product_1">Goods</label>
          <input type="radio" name="your_product" id="your_product_2" value="In-between/both">
          <label class="label-style" for="your_product_2">In-between/both</label>
          <input type="radio" name="your_product" id="your_product_3" value="Services">
          <label class="label-style" for="your_product_3">Services</label>
        </td>
      </tr>
      <tr class="form_field radio_buttons">
        <th class="form_label">Clients</th>
        <td colspan="5">
          <input type="radio" name="clients" id="clients_1" value="Businesses">
          <label class="label-style" for="clients_1">Businesses</label>
          <input type="radio" name="clients" id="clients_2" value="In-between/both">
          <label class="label-style" for="clients_2">In-between/both</label>
          <input type="radio" name="clients" id="clients_3" value="Customers">
          <label class="label-style" for="clients_3">Customers</label>
        </td>
      </tr>

    </tbody>
  </table>
</form>
<a href="#">click</a>

Answer 2

Try this:

$(document).ready(function() {

  function isEmpty() {
    $('#main_form').find('input[type="radio"]').each(function() {
      var name = $(this).attr("name");
      console.log(name, $('input:radio[name="' + name + '"]').is(":checked"))
      if (!$('input:radio[name="' + name + '"]').is(":checked")) {
        console.log(name, "Error");
        $('input:radio[name="' + name + '"]').parents('.form_field').find('.form_label').addClass('not_valid');
      }
      else{
        $('input:radio[name="' + name + '"]').parents('.form_field').find('.form_label').removeClass('not_valid');
      }
    });
  }

  $("a").click(function(e) {
    e.preventDefault();
    isEmpty();
  })
});

.not_valid {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="main_form">
  <table>
    <tbody>
      <tr class="form_field radio_buttons">
        <th class="form_label">Your product</th>
        <td colspan="5">
          <input type="radio" name="your_product" id="your_product_1" value="Goods">
          <label class="label-style" for="your_product_1">Goods</label>
          <input type="radio" name="your_product" id="your_product_2" value="In-between/both">
          <label class="label-style" for="your_product_2">In-between/both</label>
          <input type="radio" name="your_product" id="your_product_3" value="Services">
          <label class="label-style" for="your_product_3">Services</label>
        </td>
      </tr>
      <tr class="form_field radio_buttons">
        <th class="form_label">Clients</th>
        <td colspan="5">
          <input type="radio" name="clients" id="clients_1" value="Businesses">
          <label class="label-style" for="clients_1">Businesses</label>
          <input type="radio" name="clients" id="clients_2" value="In-between/both">
          <label class="label-style" for="clients_2">In-between/both</label>
          <input type="radio" name="clients" id="clients_3" value="Customers">
          <label class="label-style" for="clients_3">Customers</label>
        </td>
      </tr>

    </tbody>
  </table>
</form>
<a href="#">click</a>

Answer 3

$(document).ready(function() {

      function isEmpty() {
        $('#main_form').find('input[type="radio"]').each(function() {
          var name = $(this).attr("name");

          if ($('input:radio[name="' + name + '"]').is(":not(:checked)")) {

            $('input:radio[name="' + name + '"]').parents('.form_field').find('.form_label').addClass('not_valid');
          }
        });
      }
  $("a").click(function(e) {
  e.preventDefault();
  isEmpty();
  })
});