Using javascript to add CSS element when input set to checked

Question

Here's my current code:

<div class="form-control-switch-option">
    <input type="radio" data-value="Buy">
    <label class="form-control-switch-option-label text-color__dark btns-family">For Sale</label>
</div>

<div class="form-control-switch-option">
    <input type="radio" data-value="Buy" checked="checked">
    <label class="form-control-switch-option-label text-color__dark btns-family">For Sale</label>
</div>

What I'm wanting to do is add the class "working" to the parent element (form-control-switch-option) whenever the input element is checked. So, based on the example above, it should become this:

<div class="form-control-switch-option">
    <input type="radio" data-value="Buy">
    <label class="form-control-switch-option-label text-color__dark btns-family">For Sale</label>
</div>

<div class="form-control-switch-option working">
    <input type="radio" data-value="Buy" checked="checked">
    <label class="form-control-switch-option-label text-color__dark btns-family">For Sale</label>
</div>

Is there any way to do this with pure Javascript (not jQuery)?

Does this answer your question? OnChange event handler for radio button (INPUT type="radio") doesn't work as one value — katzenhut
– katzenhut, Commented Feb 14, 2021 at 2:16
I saw that one but it appears to be executing after an action takes place, whereas I'm looking for something that does it immediately (no need to click) because checked is automatically selected a lot of the time. — Chase
– Chase, Commented Feb 14, 2021 at 2:22

imste · Accepted Answer · 2021-02-14 02:32:10Z

1

This code will add class working immediately and by interaction.

let radios = document.querySelectorAll('input[data-value="Buy"]')
for (let i = 0; i < radios.length; i ++) {
      // if checked automatically add class 'working'
      if (radios[i].checked) {
          radios[i].parentElement.classList.add('working')
      }
      // add class 'working' by clicking
      radios[i].addEventListener('change', function () {
          this.parentElement.classList.add('working')
      })
}

You must use data-value="buy" if you want this checkbox to work. if you want to use class, you can change the querySelectorAll, for example like

document.querySelectorAll('.input-class')

the rest is still same

answered Feb 14, 2021 at 2:32

imste

3603 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using javascript to add CSS element when input set to checked

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related