Similar questions on stack overflow but not quite what I need. So I have a parent div with multiple checkboxes wrapped in labels, I then attached a click event on the parent so it bubbles to every child element. My problem is the class is toggled fine when clicked on the label (it's a class that changes the style of the label), but when I click on the actual little checkbox it does not work since it adds the class to the input and not the label, how would I make it that the class is toggled on the label even if the event. target is on the checkbox input
const requiredForm = document.querySelectorAll('.drinos-required')
const requiredCheckbox = document.querySelector('.required-form-input')
const requiredFunction = function(evt) {
if (!evt.target.classList.contains('drinos-required')) return;
evt.target.classList.toggle('checkerActive')
}
requiredCheckbox.addEventListener('click', requiredFunction).checkerActive {
background-color: red;
}<div class="required-form-input">
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Electrician</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Plumber</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Mason</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Carpenter</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Handyman</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Painter</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Cleaner</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Lawn Care/Landscaping</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Tree Service</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Pool Service</label>
</div>You need to map input/label events and not the .required-form-input. Verify all targets clicked with drinos-checkbox-required and valid if is label or checkbox. If checkbox, closest label and set the class.
const requiredForm = document.querySelectorAll('.drinos-required')
const requiredCheckbox = document.querySelector('.required-form-input')
const requiredFunction = function(evt) {
if (evt.target.classList.contains('drinos-checkbox-required')) {
if (evt.target.tagName == 'label')
evt.target.classList.toggle('checkerActive');
else evt.target.closest("label").classList.toggle('checkerActive');
}
}
requiredForm.forEach((el) => el.addEventListener('click', requiredFunction)).checkerActive {
background-color: red;
}<div class="required-form-input">
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Electrician</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Plumber</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Mason</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Carpenter</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Handyman</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Painter</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Cleaner</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Lawn Care/Landscaping</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Tree Service</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Pool Service</label>
</div>Although I think this might not be the best solution or best practice, it worked. What I did was attach another listener to the label
const requiredForm = document.querySelectorAll('.drinos-required').forEach(curr => {
curr.addEventListener('click', function () {
curr.classList.toggle('checkerActive')
})
})