JQuery：单击复选框时更改元素的样式

Question

我有一个 html 元素（使用 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>

当用户使用 JQUEry 取消选中/选中复选框时，如何更改 h2 元素的样式（在这种情况下，我想对内部的项目进行文本装饰：划线）？

提前致谢。

Answer 1

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

或者

  $('#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                
            }
        })