如果选中了一个复选框，我如何检查 JQuery，如果选中，则将 class 添加到父 label？

Question

I would like, on load of the page, to check if a checkbox is:checked Then if it is, add a class to the label. I currently have the following script but it doesn't work.

$(document).ready(function() {
    $('input').is(':checked') {
        $(this).parent('label').toggleClass('label--active');
    });
});

My HTML is:

<label class="container-checkbox" for="checkOne">
    <span class="checkbox-label">Option one</span>
    <input type="checkbox" id="checkOne">
    <span class="checkmark"></span>
</label>

I can not change the DOM order as these are custom checkboxes.

Answer 1

I guess you can use this:

 $(document).ready(function() { let checkboxone = document.getElementById('checkOne'); checkboxone.addEventListener('change',function() { checkboxone.parentNode.classList.toggle('label--active'); }); });

How does is work?

Everytime when the checkbox is clicked, the class 'label--active' will be added / removed.