根据选中的无线电切换 class

Question

根据选中的收音机，我想切换两个类 "leftChoice" 和 "rightChoice" 不幸的是代码不会工作。我试图在没有 jQuery 的情况下使用纯 JS。也许有更简单的方法可以得到结果。

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/

Answer 1

已解决问题。在纯 JS 中，您必须分别在每个元素上添加事件监听器。 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>

根据选中的无线电切换 class

Toggle class depending on checked radio

javascript

toggle

radio-button