使用 jQuery 检查复选框时如何添加和删除 CSS？

Question

我有几个复选框。我想在选中复选框时添加一个 css 类，并在未选中时删除该类。我的代码有时只能工作。例如，如果选中一个复选框，它只会添加和删除类。如果选中了多个复选框，即使未选中复选框，它也不会删除该类。有没有更好的方法来实现这一点？

$(document).ready(function () {



var ckbox = $("input[name='checklist']");
  var chkId = '';
  $('.list_task').on('change', function() {
    
    if (ckbox.is(':checked')) {
      $("input[name='checklist']:checked").each ( function() {
   			chkId = $(this).val() + ",";
        chkId = chkId.slice(0, -1);
        chklab =$(this).attr('id');
 	  });
       //cross line through label add css style
       $("#lab"+chklab).addClass("selected-task");

       //send data to ajax

    }else{

        //uncross
        $("#lab"+chklab).removeClass("selected-task");
    }
  });
  
  
});

.selected-task{
  text-decoration-line: line-through;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="checklist_bed_room">
<input id="29" type="checkbox" class="list_task" name="checklist" value="bed_dust_surface"> 
<label id="lab29" for="29">Dust surfaces</label>
<br>
<input id="30" type="checkbox" class="list_task" name="checklist" value="bed_dust_furniture_top"> 
<label id="lab30" for="30">Dust and hand wipe furniture tops</label>
<br>
<input id="31" type="checkbox" class="list_task" name="checklist" value="bed_dust_surface"> 
<label id="lab31" for="31">Dust furniture</label>
<br>
<input id="32" type="checkbox" class="list_task" name="checklist" value="bed_dust_baseboards"> 
<label id="lab32" for="32">Dust baseboards and chair rails</label>
<br>
<input id="320" type="checkbox" class="list_task" name="checklist" value="bed_dust_door_panels"> 
<label id="lab320" for="320">Dust door panels</label>
<br>
<input id="33" type="checkbox" class="list_task" name="checklist" value="bed_dust_windows"> 
<label id="lab33" for="33">Dust blinds, window sills, and lock</label>
</div>

Answer 1

对复选框更改事件进行一些调整将解决您的问题。请参见下面的示例。

$(document).ready(function() {
  $('.list_task').on('change', function() {
    var chklab = $(this).attr('id');

    if (this.checked) {
      $("#lab" + chklab).addClass("selected-task");
    } else {
      $("#lab" + chklab).removeClass("selected-task");
    }
  });
});

.selected-task {
  text-decoration-line: line-through;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>Bedrooms</h3>
<div id="checklist_bed_room">
  <input id="29" type="checkbox" class="list_task" name="checklist" value="bed_dust_surface">
  <label id="lab29" for="29">Dust surfaces</label>
  <br>
  <input id="30" type="checkbox" class="list_task" name="checklist" value="bed_dust_furniture_top">
  <label id="lab30" for="30">Dust and hand wipe furniture tops</label>
  <br>
  <input id="31" type="checkbox" class="list_task" name="checklist" value="bed_dust_surface">
  <label id="lab31" for="31">Dust furniture</label>
  <br>
  <input id="32" type="checkbox" class="list_task" name="checklist" value="bed_dust_baseboards">
  <label id="lab32" for="32">Dust baseboards and chair rails</label>
  <br>
  <input id="320" type="checkbox" class="list_task" name="checklist" value="bed_dust_door_panels">
  <label id="lab320" for="320">Dust door panels</label>
  <br>
  <input id="33" type="checkbox" class="list_task" name="checklist" value="bed_dust_windows">
  <label id="lab33" for="33">Dust blinds, window sills, and lock</label>
</div>

Answer 2

我从您的问题中了解到的是，您想在未选中复选框的标签中删除 css，并希望在选中时添加 css。如果是这种情况，我希望以下代码对您有所帮助。此方法不依赖于复选框的 id。该方法使用event.target，表示您点击的目标。

 $(document).ready(function() {
        $('.list_task').on('change', function(event) {
            if ($(event.target).prop("checked")) {
                $(event.target).next().addClass("selected-task");
            } else {
                $(event.target).next().removeClass("selected-task");
            }
        });
    });

Answer 3

没有 jQuery 的纯 CSS 解决方案，性能更好：

input:checked + label{
  text-decoration-line: line-through;
}

<div id="checklist_bed_room">
<input id="29" type="checkbox" class="list_task" name="checklist" value="bed_dust_surface"> 
<label id="lab29" for="29">Dust surfaces</label>
<br>
<input id="30" type="checkbox" class="list_task" name="checklist" value="bed_dust_furniture_top"> 
<label id="lab30" for="30">Dust and hand wipe furniture tops</label>
<br>
<input id="31" type="checkbox" class="list_task" name="checklist" value="bed_dust_surface"> 
<label id="lab31" for="31">Dust furniture</label>
<br>
<input id="32" type="checkbox" class="list_task" name="checklist" value="bed_dust_baseboards"> 
<label id="lab32" for="32">Dust baseboards and chair rails</label>
<br>
<input id="320" type="checkbox" class="list_task" name="checklist" value="bed_dust_door_panels"> 
<label id="lab320" for="320">Dust door panels</label>
<br>
<input id="33" type="checkbox" class="list_task" name="checklist" value="bed_dust_windows"> 
<label id="lab33" for="33">Dust blinds, window sills, and lock</label>
</div>