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_act”，那么它将被删除，否则添加类“label_act”

Answer 1

按以下方式更改javascript

$('.lable_item input[type="checkbox"]').click(function(){
        if(!$(this).is(':checked')){
           $(this).parent('.lable_item').addClass('label_act');
    }else{
           $(this).parent('.lable_item').removeClass('label_act');
    }
});

更改HTML如下所示。它正在发挥作用。

<div class="layout">
   <label class="lable_item" for="c1"><input type="checkbox" id="c1" />label</label>
   <label class="lable_item label_act" for="c2"><input type="checkbox" id="c2" />label</label>
   <label class="lable_item" for="c3"><input type="checkbox" id="c3" />label</label>
</div>

Answer 2

toggleClass在这里很有用。

$('.lable_item').click(function () {
     $(this).toggleClass('label_act'); 
 });

我想在label标签上添加/删除类

2 个答案: