检查选择的单选按钮

dingo_d 发表于 Dev

dingo_d

我正在使用此问题来查看我检查了哪些单选按钮以及未检查哪些单选按钮，但是我无法弄清楚自己在做什么错。

$(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并变成红色。但是我一定做错了，我的猜测是如果条件成立。我只是无法弄清楚我在这里缺少什么。

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

冬玉

通过评论：

$('input:radio[name="' + name + '"]:checked').val() === 'undefined'应该更改为$('input:radio[name="' + name + '"]').is(':checked')或其他。当前仅在您选中的收音机具有值时输入'undefined'。
当您要检查没有给定名称的检查值并更改其父级的类时，应使用$('input:radio[name="' + name + '"]')，而无需添加:checked，这会使结果成为空的jquery对象。

你也可以这样做，所有通过toggleClass，演示的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>