Toggle class depending on checked radio

Question

Depending on which radio is checked i want to toggle two classes "leftChoice" and "rightChoice" Unfortunatelly the code wont work. Im trying to use pure JS without jQuery. Maybe there is an easier way to get the result.

var wrapper = document.getElementById('wrapper');
var choices = document.getElementsByName("choices");
var checkedChoice = "";

wrapper.classList.remove("rightChoice");
wrapper.classList.add("leftChoice");

choices.onchange(function() {  
    for (var i = 0, length = choices.length; i < length; i++) {
        if (choices[i].checked) {
            checkedChoice = choices[i].value;
            break;
        }
    } 
    if(checkedChoice == "one"){   
        wrapper.classList.remove("rightChoice");
        wrapper.classList.add("leftChoice");
    }
    else if(checkedChoice == "two"){
        wrapper.classList.remove("leftChoice");
        wrapper.classList.add("rightChoice");
    }
});

https://jsfiddle.net/Lo6pzn1a/

You should post the entire example here, reduced to a minimal example (you really don't need all the CSS and HTML). You also need to define what "code wont work" means, so provide an explanation of what you expect to see and what actually happens. — RobG, Mar 31 '20 at 22:50
Duplicate of [*addEventListener on NodeList*](https://stackoverflow.com/questions/12362256/addeventlistener-on-nodelist). — RobG, Mar 31 '20 at 23:11

score 0 · Accepted Answer · answered Mar 31 '20 at 22:53

Fixed the issue. In pure JS you have to add eventlistener on each element seperately. fiddle link : https://jsfiddle.net/561x90k4/

var wrapper = document.getElementById('wrapper');
var choices = document.getElementsByName("choices");
var checkedChoice = "";

wrapper.classList.remove("rightChoice");
wrapper.classList.add("leftChoice");

choices.forEach(item => item.addEventListener('change',(function() {  
    for (var i = 0, length = choices.length; i < length; i++) {
        if (choices[i].checked) {
          checkedChoice = choices[i].value;
          break;
        }
    } 
    if(checkedChoice == "one"){   
        wrapper.classList.remove("rightChoice");
        wrapper.classList.add("leftChoice");
    }
    else if(checkedChoice == "two"){
        wrapper.classList.remove("leftChoice");
        wrapper.classList.add("rightChoice");
    }
})));

.clearfix::before {
    content: "";
    display: table;
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.choice {
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: 25px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 49%;
}

.choice input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.choice > .checkmark {
  position: relative;
  display: block;
  padding: 10px;
  background-color: #eee;
}


.choice:hover input ~ .checkmark {
  background-color: #ccc;
}


.choice input:checked ~ .checkmark {
  background-color: #2196F3;
}

label.choice,
.choice_arrow {
    float: left;
    width: 30%;
}

.choice_arrow {
    width: 20%;
    background: #f00;
    position: relative;
    height: 48px;
    border-radius: 30px;
    border: 1px solid #ccc;
}
.choice_arrow > .bullet {
    border-radius: 50%;
    width: 43px;
    height: 43px;
    position: absolute;
    background: #ff0;
    border: 1px solid #ccc;
    top: 1px;
}
.choice_arrow > .bullet > span {
    font-size: 30px;
    margin-top: 7px;
    margin-left: 7px;
}

#wrapper.leftChoice .choice_arrow .bullet { left: 2px; transform: rotate(0deg); }
#wrapper.rightChoice .choice_arrow .bullet  { right: 2px; transform: rotate(180deg); }

<div id="wrapper" class="clearfix">
  <label class="choice">
    <input type="radio" id="choice1" checked="checked" name="choices" value="one">
    <span class="checkmark">Choice 1</span>
  </label>
  <div class="choice_arrow">
    <div class="bullet">
      <span class="fa fa-chevron-left"></span>
    </div>
  </div>
  <label class="choice">
    <input type="radio" id="choice2" name="choices" value="two">
    <span class="checkmark">Choice 2</span>
  </label>
</div>

Toggle class depending on checked radio

1 Answers1