Question

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

Answer 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');
      }    
});

Answer 2

我现在看到你在追求什么。问题出在这一行：

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

Answer 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

jQuery .prop在单选按钮上添加/删除类 - 不工作

3 个答案: