How to add and remove CSS when checkbox is checked with jQuery?

Question

I have several checkboxes. I want to add a css class when a checkbox is checked and remove the class when it's unchecked. The code I have only works sometimes. For instance, it will only add and remove the class if one checkbox is checked. If several checkboxes are checked, it will not remove the class even if the checkbox is unchecked. Is there a better way of achieving this?

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

score 1 · Accepted Answer · answered Apr 22 '20 at 06:25

A couple of tweaks to the checkbox change event will fix your problem. See example below.

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

As a bonus, you an also use `$("label[for='checkboxId']")` to retrieve the labels using jQuery. Instead of using the id prefix. See the good examples [here](https://stackoverflow.com/questions/1186416/jquery-selector-for-the-label-of-a-checkbox). — j-petty, Apr 22 '20 at 06:28

score 1 · Answer 2 · answered Apr 22 '20 at 06:26

What I understood from your question is you want to remove css from the label of the checkbox when it is unchecked and want to add css when it is checked. If that is the case I hope following code will help you. This method is not dependent on id of the checkbox. This method is using event.target, by which it means the target on which you click.

 $(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");
            }
        });
    });

score 1 · Answer 3 · answered Apr 22 '20 at 06:28

A CSS only solution without jQuery, much better for performance:

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>

How to add and remove CSS when checkbox is checked with jQuery?

3 Answers3