How to add css with the associated span on checkbox checked?

Question

I want to add the class to the associated span on checkbox checked with the following code. actually I wants to add the "text-decoration-line", "line-through" to the associated the checkbox span.

But now when I am click on first checkbox css applies to all spans as shown in code.

 $(document).ready(function() { $('input[type=checkbox]').change(function() { if (this.checked) { $(".label-text").css("text-decoration-line", "line-through"); } else { $(".label-text").css("text-decoration-line", "none"); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="p-3 bg-white"> <div class="d-flex align-items-center"> <label> <input type="checkbox" class="option-input radio"> <span class="label-text">Task list and assignments</span> </label> </div> <div class="d-flex align-items-center"> <label> <input type="checkbox" class="option-input radio"> <span class="label-text">Set due date and assignments</span> </label> </div> <div class="d-flex align-items-center"> <label> <input type="checkbox" class="option-input radio"> <span class="label-text">Remove duplicate tasks and stories</span> </label> </div> <div class="d-flex align-items-center"> <label> <input type="checkbox" class="option-input radio"> <span class="label-text">Update the userflow and stories</span> </label> </div> <div class="d-flex align-items-center"> <label> <input type="checkbox" class="option-input radio"> <span class="label-text">Adjust the components</span> </label> </div> </div>

Answer 1

because you set all .label-text . you should set one which is next input

 $(document).ready(function() { $('input[type=checkbox]').change(function() { if (this.checked) { $(this).next(".label-text").css("text-decoration-line", "line-through"); } else { $(this).next(".label-text").css("text-decoration-line", "none"); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="p-3 bg-white"> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Task list and assignments</span></label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Set due date and assignments</span></label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Remove duplicate tasks and stories</span></label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Update the userflow and stories</span></label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Adjust the components</span></label></div> </div>

Answer 2

You can use .next() to get the next element, the issue was that you are doing a select on class which apply the CSS on all elements, here is how you can do it:

 $(document).ready(function() { $('input[type=checkbox]').change(function() { $(this).next().css("text-decoration-line", this.checked? "line-through": "none" ); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="p-3 bg-white"> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Task list and assignments</span></label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Set due date and assignments</span></label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Remove duplicate tasks and stories</span></label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Update the userflow and stories</span></label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Adjust the components</span></label></div> </div>

Answer 3

Right now $(".label-text") is going to select every element that matches that class. So when this.checked is true, all checkboxes will be updated.

Instead, try using find along with parent .

 $(document).ready(function() { $('input[type=checkbox]').change(function() { if (this.checked) { $(this).parent().find(".label-text").css("text-decoration-line", "line-through"); } else { $(this).parent().find(".label-text").css("text-decoration-line", "none"); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="p-3 bg-white"> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Task list and assignments</span></label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Set due date and assignments</span></label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Remove duplicate tasks and stories</span></label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Update the userflow and stories</span></label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Adjust the components</span></label></div> </div>

Answer 4

HTML:

<div class="p-3 bg-white">
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Task list and assignments</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span> Set due date and assignments</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span> Remove duplicate tasks and stories</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span> Update the userflow and stories</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span> Adjust the components</span></label></div>
</div>

JQUERY:

$(document).ready(function() {
   $('input[type=checkbox]').change(function() {
        $this = $(this);
        if (this.checked) {
          $this.next('span').css('text-decoration-line','line-through');
        } else {
          console.log('un-clicked');
          $this.next('span').css("text-decoration-line", "none");
        }
   });
});

You have to add <span> tag to each text or sentence to apply class or css.

Answer 5

I have done some minor modification in html. So as per my assumption modified as below,

HTML:

 $(document).ready(function() { $('input[type=checkbox]').change(function() { if (this.checked) { $(this).next().addClass( "yourClass" ) // I assume you wanted to add class to text element $(this).next().css("text-decoration-line", "line-through");// I assume you wanted to strike out the text on clicking checkboxes } else { $(this).next().removeClass( "yourClass" ) $(this).next().css("text-decoration-line", "none"); } }); });

 .yourclass{ color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="p-3 bg-white"> <div class="d-flex align-items-center"> <label> <input type="checkbox" class="option-input radio"> <span class="label-text">Task list and assignments</span> </label> </div> <div class="d-flex align-items-center"> <label> <input type="checkbox" class="option-input radio"> <span>&nbsp;Set due date and assignments<span> </label> </div> <div class="d-flex align-items-center"> <label> <input type="checkbox" class="option-input radio"> <span>&nbsp;Remove duplicate tasks and stories<span> </label> </div> <div class="d-flex align-items-center"> <label> <input type="checkbox" class="option-input radio"> <span>&nbsp;Update the userflow and stories<span> </label> </div> <div class="d-flex align-items-center"> <label> <input type="checkbox" class="option-input radio"> <span>&nbsp;Adjust the components<span> </label> </div> </div>

jquery:

$(document).ready(function() {
$('input[type=checkbox]').change(function() {
    if (this.checked) {
        $(this).next().addClass( "yourClass" ) // I assume you wanted to add class to text element 
        $(this).next().css("text-decoration-line", "line-through");// I assume you wanted to strike out the text on clicking checkboxes 

    } else {
        $(this).next().removeClass( "yourClass" )
        $(this).next().css("text-decoration-line", "none");
    }

});
});

Answer 6

Have some feedback on the implementation:

1. It is more manageable to organize style with css class. In this example I create option-label__checked to hold the text-decoration-line style.
2. We can utilize a technique call event delegation, to have single event handle to serve multiple UI control. Since you use jQuery, the technique is implemnted by .on( events [, selector ] [, data ], handler ) . I attach the handle to .p-3 and listen for change event coming from input element. It becomes handy when controls are added dynamicly. It also helps performance-wise
3. The reason your sample doesn't work because you apply line-through to all .label-text at once.
4. .toggleClass( className, state ) second paramter allows you put to a boolean to turn a class on or off, fits perfectly with the checkbox status. And the statement comes in single line.

 $(document).ready(function() { $('.p-3').on('change', 'input[type=checkbox]', function() { $(this).parent().toggleClass('option-label__checked', this.checked); }); });

 .option-label__checked { text-decoration-line: line-through; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="p-3 bg-white"> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Task list and assignments</span></label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio">&nbsp;Set due date and assignments</label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio">&nbsp;Remove duplicate tasks and stories</label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio">&nbsp;Update the userflow and stories</label></div> <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio">&nbsp;Adjust the components</label></div> </div>