JQuery: Changing style of element when Checkbox is click
-
19-06-2021 - |
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.
Solution
$('#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
}
})
OTHER TIPS
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)
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow