javascript - 检查选定的单选按钮

Question

我正在使用 this question查看我检查了哪些单选按钮以及没有检查哪些单选按钮，但我无法弄清楚我做错了什么。

$(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>

当我执行 console.log($('input:radio[name="' + name + '"]:checked').val()) 时，如果我检查按钮组的值(重复 3 次)和未定义(3 次)，如果我不选择任何东西，我会得到 6 次未定义。因此，如果我的逻辑是正确的，我的标签应该获得类 not_valid 并变为红色。但我一定做错了什么，我的猜测是 if 条件。我只是不知道我在这里错过了什么。

如果未选中单选按钮组，我想将标签设为红色。

Answer 1

根据评论:

1. $('input:radio[name="' + name + '"]:checked').val() === 'undefined' 应更改为 $('input:radio[name="' + name + '"]').is(':checked') 或其他。目前，仅当您选中的 radio 具有值 'undefined' 时，它才会进入。

2. 如果您想检查给定的名称是否没有被检查的值，并更改其父级的类，您应该使用 $('input:radio[name="' + name + '"] ')，没有 :checked，这会使结果成为一个空的 jquery 对象。

您也可以通过 toggleClass, demo jsfiddle 来完成这一切，通过使用这些，如果您检查了无效的组，您可以通过再次单击该检查按钮来删除无效的类。

// 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'));

更改源代码:

$(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>