JQuery: Changing style of element when Checkbox is click

Question

I have a html elements (Using MVC3 Razor)

       <h2 class="price">
              @Html.LabelFor(vm => vm.Price)
              @Html.Encode(@Model.Price)
       </h2>
        <div id="checkbox-price">
              @Html.CheckBoxFor(vm => vm.IncludeToPayment) Include in payment.
        </div>

How can I change the style of the h2 element, (in this case I want to text-decoration: line-through the items inside) when the user uncheck/check the Checkbox using JQUery?

Thanks in advance.

Tats_innit · Accepted Answer · 2012-07-04 02:07:35Z

5

$('#checkbox-price input:checkbox').change(function(){
  if (!$(this).is(':checked')) {
     $('.price').css('text-decoration', 'line-through')
  } else {
     $('.price').css('text-decoration', 'none')
  }
})

or

  $('#checkbox-price input:checkbox').change(function() { 
            // or $(`input[type="checkbox"]')
            var $obj = $('.price');
            if (!$(this).is(':checked')) {
              $obj.css('text-decoration', 'line-through'); //or addClass                
            } else {
              $obj.css('text-decoration', 'none'); // or addClass                
            }
        })

edited Jul 4, 2012 at 2:07

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

answered Jul 4, 2012 at 1:48

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lincx Over a year ago

how about if i have many checkboxes? is this also triggers if I checked the other checkboxes? sorry Im a beginner in JQuery

Ram Over a year ago

@csharplinc in that case the code should be modified, it depends on the structure of the markup.

Tats_innit Over a year ago

@undefined ++1 for the quick-ness :P, Can do a minor improvement.

Dips · Accepted Answer · 2012-07-04 01:58:37Z

2

Here is a simple code and live demo.

This applies for all the check boxes

$('input[type="checkbox"]').click(function() {
    if (this.checked) {
        //alert('Checked');
        $("h2").addClass('newclass');
    } else {
        //alert('Unchecked');
        $("h2").removeClass('newclass');
    }
});

If you want to apply for specific check box use below

$('input[type="checkbox"]') to $('input.someclass)

answered Jul 4, 2012 at 1:58

Dips

3,2903 gold badges22 silver badges21 bronze badges

Collectives™ on Stack Overflow

JQuery: Changing style of element when Checkbox is click

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related