修復了問題。在純 JS 中，您必須分別在每個元素上添加事件監(jiān)聽器。小提琴鏈接：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>
