CODEWITHSUNDEEP
javascriptcssformscheckbox
Chris Ware
Chris Ware

Reputation: 135

How to change label styling on checkbox :checked

I'm currently building a form that has checkboxes wrapped inside of labels. We are doing this because we need to swap our the original checkbox for an image. However, when the checkbox is checked, we need to make the label have a border to give some user feedback.

Here is the setup of the labels/checkboxes

<div class="one_column">
    <label for="fieldname2_1_cb0">
      <input name="fieldname2_1[]" id="fieldname2_1_cb0" class="field depItem group  required" value="Alloy Wheel(s)" vt="Alloy Wheel(s)" type="checkbox"> <span>Alloy Wheel(s)</span>
    </label>
</div>

We have tried going about is using the following but obviously doesn't work

label input[type="checkbox"]:checked + label {
border: 5px solid blue;
}

Any help would be appreciated!

I have managed to the the first checkbox using the code supplied below

    window.onload=function() {
  document.querySelector('input[type="checkbox"]').addEventListener('change', 
  function() {
      if (this.checked) {
      this.parentNode.classList.add('border-blue');
      } else {
        this.parentNode.classList.remove('border-blue');
      }
   })}

However, it only changes the first checkbox... there are 10 in total all following the same structure as above

Upvotes: 1

Views: 535

Answers (1)

Henfs
Henfs

Reputation: 5411

Using CSS, there is no way to select parent elements from child elements.

If you are allowed to use JavaScript, you can solve it this way:

document.querySelectorAll('input[type="checkbox"]').forEach(function(el) {
  el.addEventListener('change', function() {
    if (this.checked) {
      this.parentNode.classList.add('border-blue');
    } else {
      this.parentNode.classList.remove('border-blue');
    }
  })
})

.border-blue {
  border: 5px solid blue;
}

It will check for changes on input. If it is checked, a class will be added. Otherwise, the class will be removed.

Upvotes: 2

Related Questions