Question

这是我的Javascript代码

$('.lable_item').click(function () {
    if (!$(this).hasClass('label_act')) {
        $(this).addClass('label_act');
    } else {
        $(this).removeClass('label_act');
    }
});

这是我的HTML内容

<div class="layout">
   <label class="lable_item"><input type="checkbox" />label</label>
   <label class="lable_item label_act"><input type="checkbox" />label</label>
   <label class="lable_item"><input type="checkbox" />label</label>
</div>

我想在标签上添加/删除类。如果label有“label_act”，那么它将被删除，否则添加类“label_act”

Answer 1

DEMO

$('.lable_item').find(':checkbox').on('change',function () {
    var $label = $(this).closest('label');
    $label.toggleClass('label_act',this.checked)
});

Answer 2

为了在您点击时不再运行2次，您必须使用input代替label

  $('.layout input').click(function () {
      $(this).parent().toggleClass('label_act')
  });

FIDDLE

使用if else添加删除类的bug

2 个答案: