Preguntas similares sobre el desbordamiento de la pila, pero no exactamente lo que necesito. Así que tengo un div principal con varias casillas de verificación envueltas en etiquetas, luego adjunté un evento de clic en el elemento principal para que aparezca en todos los elementos secundarios. Mi problema es que la clase se alterna bien cuando se hace clic en la etiqueta (es una clase que cambia el estilo de la etiqueta), pero cuando hago clic en la pequeña casilla de verificación real, no funciona, ya que agrega la clase a la entrada y no el etiqueta, ¿cómo haría para que la clase se alternara en la etiqueta incluso si el evento. el objetivo está en la entrada de la casilla de verificación
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>Debe asignar eventos de entrada/etiqueta y no el .required-form-input. Verifique todos los objetivos en los que se hizo clic con drinos-checkbox-required y válido si es una etiqueta o una casilla de verificación. Si marca la casilla, etiqueta más cercana y establece la clase.
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>Aunque creo que esta podría no ser la mejor solución o la mejor práctica, funcionó. Lo que hice fue adjuntar otro oyente a la etiqueta.
const requiredForm = document.querySelectorAll('.drinos-required').forEach(curr => { curr.addEventListener('click', function () { curr.classList.toggle('checkerActive') }) })