0

我需要在一系列单选按钮和复选框上添加/删除一个通用类（类似于 .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。

4

3 回答 3

1

尝试使用本机属性：

$('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');
      }    
});
于 2013-07-29T18:00:51.790 回答
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/

于 2013-07-29T18:07:53.310 回答
0

怎么样：

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 在这里就可以了。

和一把小提琴

于 2013-07-29T18:14:43.693 回答