Переключить класс в зависимости от проверенного радио - PullRequest
Новая
       19

Переключить класс в зависимости от проверенного радио

0 голосов
/ 01 апреля 2020

В зависимости от того, какое радио проверено, я хочу переключить два класса "leftChoice" и "rightChoice". К сожалению, код не будет работать. Я пытаюсь использовать чистый JS без jQuery. Возможно, есть более простой способ получить результат. 

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/

1 Ответ

0 голосов
/ 01 апреля 2020

Исправлена ​​проблема. В чистом JS вы должны добавить EventListener для каждого элемента отдельно. Скриптовая ссылка: 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>
...