Checkbox event not triggering class toggle on label-CodePudding

Similar questions on stackoverflow but not quite what I need. So I have a parent div with multiple checkboxes wrapped in labels, I then attached a click even on the parent so it bubbles to every child element. My problem is the class is toggled fine when clicked on the label (its a class that changes the style of the label), but when I click on the actuall 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 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 >
  <label >  <input  type="checkbox" name="checkbox" value="value">Electrician</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Plumber</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Mason</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Carpenter</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Handyman</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Painter</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Cleaner</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Lawn Care/Landscaping</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Tree Service</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Pool Service</label>
</div>

CodePudding user response：

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 >
  <label >  <input  type="checkbox" name="checkbox" value="value">Electrician</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Plumber</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Mason</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Carpenter</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Handyman</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Painter</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Cleaner</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Lawn Care/Landscaping</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Tree Service</label>
  <label >  <input  type="checkbox" name="checkbox" value="value">Pool Service</label>
</div>

CodePudding user response：

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')
           })
      })