CODEWITHSUNDEEP
htmljquerycss
Grogu
Grogu

Reputation: 2475

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

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>

Upvotes: 0

Views: 1592

Answers (3)

cloned
cloned

Reputation: 6742

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>

Upvotes: 1

Charu Rajput
Charu Rajput

Reputation: 653

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

Upvotes: 1

j-petty
j-petty

Reputation: 3026

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>

Upvotes: 1

Related Questions