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



  
    
    
    Task list and assignments
    
  
  
    
    
    Set due date and assignments
    
  
  
    
    
    Remove duplicate tasks and stories
    
  
  
    
    
    Update the userflow and stories
    
  
  
    
    
    Adjust the components

user_11183422 · Answer

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

  });
});



  Task list and assignments
  Set due date and assignments
  Remove duplicate tasks and stories
  Update the userflow and stories
  Adjust the components

user_896358 · Answer

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



  Task list and assignments
  Set due date and assignments
  Remove duplicate tasks and stories
  Update the userflow and stories
  Adjust the components

user_7347858 · Answer

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



  Task list and assignments
  Set due date and assignments
  Remove duplicate tasks and stories
  Update the userflow and stories
  Adjust the components

user_6151674 · Answer

HTML:


  Task list and assignments
   Set due date and assignments
   Remove duplicate tasks and stories
   Update the userflow and stories
   Adjust the components

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 tag to each text or sentence to apply class or css.

user_7901403 · Answer

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


    
    
        
            
            Task list and assignments
        
        
    
        
            
             Set due date and assignments
        
    
    
        
            
             Remove duplicate tasks and stories
        
    
    
        
            
             Update the userflow and stories
        
    
    
        
            
             Adjust the components

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

});
});

user_5594167 · Answer

Have some feedback on the implementation:

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.
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
The reason your sample doesn't work because you apply line-through to all .label-text at once.
.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;
}



  Task list and assignments
   Set due date and assignments
   Remove duplicate tasks and stories
   Update the userflow and stories
   Adjust the components

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

6 Answers