Стилированные радио кнопки не будут работать

Question

Почему мой код работает неправильно?
Я хочу работать так: https://www.16personalities.com/free-personality-test

Вот ист мой код:
https://jsfiddle.net/DTcHh/29845/

<div class="hidden-xs col-sm-3 caption left" onclick="setAnswer(2, -3);">Agree</div> 
         <div class="col-sm-6 col-xs-12" data-toggle="buttons" aria-label="Options"> 
          <fieldset id="group2"> 
           <label class="btn agree max" onclick="setAnswer(2, -3);"> 
            <input type="radio" name="group2" autocomplete="off"> 
           </label> 
           <label class="btn agree med" onclick="setAnswer(2, -2);"> 
            <input type="radio" name="group2" autocomplete="off"> 
           </label> 
           <label class="btn agree min" onclick="setAnswer(2, -1);"> 
            <input type="radio" name="group2" autocomplete="off"> 
           </label> 
           <label class="btn neutral" onclick="setAnswer(2, 0);"> 
            <input type="radio" name="group2" autocomplete="off"> 
           </label> 
           <label class="btn disagree min" onclick="setAnswer(2, 1);"> 
            <input type="radio" name="group2" autocomplete="off"> 
           </label> 
           <label class="btn disagree med" onclick="setAnswer(2, 2);"> 
            <input type="radio" name="group2" autocomplete="off"> 
           </label> 
           <label class="btn disagree max" onclick="setAnswer(2, 3);"> 
            <input type="radio" name="group2" autocomplete="off"> 
           </label> 
          </fieldset> 
         </div> 
         <div class="hidden-xs col-sm-3 caption right" onclick="setAnswer(2, 3);">Disagree</div> 

У меня нет каких-либо JS на моем сайте, за исключением предустановленных сценариев Bootstrap.

Answer 1

I forked your jsfiddle внести изменения.

Чтобы настроить таргетинг на элемент ввода, используйте селектор атрибутов. Поэтому для вашего случая вы можете настроить таргетинг на радиокнопку, выполнив это input[type="radio"]{..insert css properties here..}. Так как вы не хотите отображать переключатели, вы устанавливаете непрозрачность на 0. Вы также используете z-index, чтобы убедиться, что он ушел весь путь, и может установить z-index на любое значение по вашему выбору, но позволяет ведите себя здесь и установите для него -1. Это должно помочь скрыть переключатели.

input[type="radio"] { 
    opacity: 0; 
    z-index: -1; 
} 

В качестве альтернативы вы можете просто установить его для отображения.

input[type="radio"] { 
    display:none; 
} 

Оба вышеуказанных объекта хорошо спрятали радиокнопки.

Перемещение, вместо использования: active и: focus псевдоселекторов, я использовал классы ярлыков, которые вы указали, а именно. согласитесь, нейтральны и не согласны, чтобы изменить фон на соответствующие цвета.

Итак, после того, как вы укажете свойства css для класса .btn, вы затем используете псевдо-класс наведения и установите цвет фона для наведения мыши, а затем нацелитесь на класс .active, чтобы установить цвет фона постоянно на указанный цвет.

.btn.agree:hover, .btn.agree.active{ 
    color: #4C9070; 
    background-color: #4C9070; 
} 

Что это делает он использует тот же цвет для висения и при нажатии на вариант, то есть опция активна. Затем вы можете определить css для нейтральных и несогласных классов таким же образом, заменив .agree на .neutral и .disagree соответственно.