jQuery .prop 在单选按钮上添加/删除类 - 不起作用答案

【问题标题】：jQuery .prop to add/remove class on radio button - not workingjQuery .prop 在单选按钮上添加/删除类 - 不起作用
【发布时间】：2013-07-29 15:33:54
【问题描述】：

我需要在一系列单选按钮和复选框上添加/删除一个通用类（类似于 .is-checked）。这是我的代码：

$(function () {
  $('input[type="checkbox"], input[type="radio"]').each(function () {
    $(this).on('click', function () {
      $(this).parent().wrap('<div>').unwrap();  
        // works great for checkboxes, but not for radios
        if ($(this).prop('checked')) {
          $(this).addClass('is-checked');
        } else {
          $(this).removeClass('is-checked');
        }
    })
  })
})

这在复选框上非常有效，但在添加到单选按钮的类上永远不会被删除。想法？想法？

编辑我不小心忽略了提到这个脚本将为 IE8 有条件地加载，因为不支持 ':checked' 伪选择器。整个功能在除 IE8 之外的所有设备中都运行良好，因此这是该浏览器的拐杖，而可怜的用户则坚持使用它。最后，'is-checked' 类将触发与 :checked 选择器相同的 CSS。

【问题讨论】：

你为什么在你的each 中使用$(this).on('click', function () {？你能详细说明一下吗？
您的代码似乎对我有用。两个点击事件都在触发并设置is-checked 类。 jsfiddle.net/xzNPh
@WillemEllis 可能在 jquery 版本中有所不同（认为是 1.6 改变了 attr 和 prop 的行为）
不使用.is-checked 类，为什么不在你的css 中使用:checked？
@hungerpain 我不确定为什么这不需要点击事件。整个想法是用户将手动更改输入的状态至少一次，如果不是多次的话。

标签： jquery checkbox radio prop

【解决方案1】：

我现在明白你在追求什么了。问题出在这一行：

$(this).removeClass('is-checked');

它只是从被点击的元素中删除.is-checked。这适用于复选框，但由于无线电的工作方式不同，这将不起作用。要解决这个问题，请执行以下操作：

$(function () {
    $('input[type="checkbox"], input[type="radio"]').on('click', function () {
        $(this).parent().wrap('<div>').unwrap();
        $('input[type="checkbox"], input[type="radio"]').each(function () {
            $(this).is(':checked') ? $(this).addClass('is-checked') : $(this).removeClass('is-checked');
        });
    });
});

http://jsfiddle.net/xzNPh/4/

【讨论】：

【解决方案2】：

尝试使用原生属性：

$('input[type="checkbox"], input[type="radio"]').on('click', function () {
      $(this).parent().wrap('<div>').unwrap(); 
      if (this.checked) {
          $(this).addClass('is-checked');
      } else {
          $(this).removeClass('is-checked');
      }    
});

【讨论】：

【解决方案3】：

怎么样：

var inputs = $('input[type="checkbox"], input[type="radio"]');
inputs.on('click', function () {
    $(this).parent().wrap('<div>').unwrap();  
    inputs.removeClass('is-checked');
    $(this).toggleClass('is-checked', $(this).prop('checked', true));
});

您还没有解释它的用途，所以如果您甚至需要该代码，我也不会冒险猜测。例如。如果它只是样式，那么 css 在这里就可以了。

还有一个fiddle

【讨论】：