CODEWITHSUNDEEP
htmljquerycss
Esam Olwan
Esam Olwan

Reputation: 362

How do I change label to be bolder when I check checkbox?

I've a div containing a checkbox and a label as so :

<div class="form-check m-1">
    <input class="form-check-input mr-1 input-height-width" type="checkbox" value="" id="Wokin" />
    <label class="form-check-label" for="Wokin">
        Wokin
    </label>
    <span class="badge badge-pill badge-warning product-quantity">18</span>
</div>

How do I make the label bolder for this div only when I check the checkbox ?

$('.form-check input').change(() => {
    if (this.checked) {
        if ($('.form-check label').attr('for') == (this.attr('id'))) {
            $('.form-check label').addClass('bold');
        }
    }
})

I've tried doing this in jQuery when I have a class called bold which makes font-weight bold, but it's not working.

.bold {
 font-weight:bold;
 }

Upvotes: 1

Views: 745

Answers (3)

user6057915
user6057915

Reputation:

this would be my solution:

    $('.form-check input').off('change').on('change',function(ev){

        if ( $(this).prop('checked')) {

            if ($('.form-check label').attr('for') == ($(this).attr('id'))) {
                $('.form-check label').addClass('bold');
            }
        }
    })

Upvotes: 0

Andrew Corrigan
Andrew Corrigan

Reputation: 1057

Tweaking your jQuery to declare the function should work.

$('.form-check-input').change(function(input) {
    if ($(input.target).checked) {
        if ($('.form-check-label').attr('for') == (this.attr('id'))) {
            $('.form-check-label').addClass('bold');
        }
    }
})

Upvotes: 0

JW Geertsma
JW Geertsma

Reputation: 877

You could try some CSS code to check if the checkbox is checked and then apply the bold code to the adjacent sibling with using the + character.

Code suggestion:

.form-check-input:checked + label {
  font-weight: bold;
}

Upvotes: 3

Related Questions