Как добавить и удалить CSS, когда флажок установлен с jQuery?

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

Что я понял из вашего вопроса, так это то, что вы хотите удалить css с метки флажка, когда он не отмечен, и хотите добавить css, когда он отмечен. Если это так, я надеюсь, что следующий код поможет вам. Этот метод не зависит от идентификатора флажка. Этот метод использует 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 2

A CSS только решение без jQuery, намного лучше для производительности:

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>

Answer 3

Пара твиков к событию смены флажка исправит вашу проблему. Смотрите пример ниже.

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