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.
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.