检查选定的单选按钮答案

【问题标题】：Check for selected radio button检查选定的单选按钮
【发布时间】：2016-03-22 09:12:01
【问题描述】：

我正在使用 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 条件。我只是无法弄清楚我在这里缺少什么。

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

【问题讨论】：

我猜这个=== 'undefined' 没有检查你所期望的（未定义的值，不是字符串），试试=== undefined
最好使用typeof $('input:radio[name="' + name + '"]:checked').val() === 'undefined'，除非你有一个值为'undefined'的收音机，否则你当前的if条件永远不会为真。
typeof 在您不想抛出 ReferenceError 时很有用，但事实并非如此
@Haketo 我只用undefined 尝试过，没有运气：\ 我没有价值'undefined'，我会看看typeof 给了我什么。
您应该使用$('input:radio[name="' + name + '"]').is(':checked') 而不是$('input:radio[name="' + name + '"]:checked')。

标签： javascript jquery html css

【解决方案1】：

由cmets：

$('input:radio[name="' + name + '"]:checked').val() === 'undefined' 应更改为 $('input:radio[name="' + name + '"]').is(':checked') 或其他内容。目前，只有当您选中的收音机的值为 'undefined' 时，它才会输入。

您也可以通过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>

【讨论】：

基本上就是这样 :) 谢谢。

【解决方案2】：

$(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();
  })
});

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：