我有一个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 元素的样式(在本例中,我想进行文本修饰:穿过里面的项目)?
提前谢谢。
$('#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
}
})
这是一个简单的代码和现场演示。
这适用于所有复选框
$('input[type="checkbox"]').click(function() {
if (this.checked) {
//alert('Checked');
$("h2").addClass('newclass');
} else {
//alert('Unchecked');
$("h2").removeClass('newclass');
}
});
如果您想申请特定的复选框,请使用下面的复选框
$('input[type="checkbox"]') to $('input.someclass)