スタイリッシュなラジオボタンが機能しない

Question

コードが正しく動作しないのはなぜですか？
私はそれがこのように仕事をしたい：私のコードISTここ 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を持っていません。

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; 
} 

また、noneを表示するように設定することもできます。

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

上記の両方のプロパティは、ラジオボタンを隠すのに適しています。

：activeおよび：focus擬似セレクタの代わりに、指定したラベルクラスを使用しました。それぞれの色に背景が変わるように同意、中立、同意しない。

したがって、.btnクラスのcssプロパティを指定した後、ホバーの疑似クラスを使用して、マウスのホバーの背景色を設定し、.activeクラスをターゲットにして背景色を永続的に指定します色。

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

これが何をするか、それはホバーのために同じ色を使用して、オプションをクリックしたとき、すなわちオプションがアクティブになっています。 .agreeを.neutral、.disagreeにそれぞれ置き換えることで、同じ方法で中立クラスと不一致クラスのCSSを定義することができます。