他のラジオボタンをクリックすると画像としてのラジオボタンがオフにならない

Question

リスト内の他のラジオボタンをクリックするとラジオボタンのチェックを外したいだけです。 （？それは無線が動作するようになっている方法です）

ここに私のコードです：

<div class="row"> 

    <div class="col-sm-2"> 
    <label>Payment methods:</label> 

    <input type="radio" name="pp" id="pp" checked> 
    <label for="pp"> 
    <img src="../img/pp-icon.png"> 
    <div>Paypal</div> 
    </label> 
</div> 
    <div class="col-sm-2"> 
    <label style="visibility: hidden;">Payment methods:</label> 
    <input type="radio" name="skrill" id="skrill"> 
    <label for="skrill"> 
    <img src="../img/skrill-icon.png"> 
    <div>Skrill</div> 
    </label> 
    </div> 


</div> 

CSS：

input[type=radio]{ /* HIDE RADIO */ 
    visibility: hidden; /* Makes input not-clickable */ 
    position: absolute; /* Remove input from document flow */ 
} 
input[type=radio] + label>img{ /* IMAGE STYLES */ 
    border-radius: 50%; 
    border: 1px solid #fff; 
    padding: 20px; 
    width: 100px; 
    cursor: pointer; 
    transition: 0.2s linear; 
} 
input[type=radio]:checked + label>img{ /* (RADIO CHECKED) IMAGE STYLES */ 
    background-color: rgba(255, 255, 255, 0.8); 
} 

問題のDEMO：https://jsfiddle.net/gsda8s6r/（ラジオボタンが隠されていない）

ライブ写真：

助けてくれてありがとう！

Answer 1

ラジオボタンは、同じ名前を持つ必要があり、あなたはここでラベル・タグ 内の画像を配置することができ、更新フィドルがhttps://jsfiddle.net/gsda8s6r/1/

<div class="col-sm-2"> 
     <label> 
     <input type="radio" name="payment" id="pp" checked> 
     <img style="max-height: 100px; width: auto;" src="http://www.aganis.it/siti-web-trento-blog/wp-content/uploads/2015/09/img-logo-paypal.png"> 
     <div>Paypal</div> 
     </label> 
    </div> 
     <div class="col-sm-2"> 
     <label> 
     <input type="radio" name="payment" id="skrill"> 
     <img style="max-height: 100px; width: auto;" src="https://content.skrill.com/fileadmin/content/images/business/global_coverage_icon.png"> 
     <div>Skrill</div> 
     </label> 
     </div> 

Answer 2

あるこのフィドルチェック：JSFiddle
を私はあなたのCSSの一部を変更しましたが、私はあなたがトリックを取得すると思います。
他の人の話によれば、ラジオボタンの名前は同じでなければなりません。また、次のCSSでデフォルトのラジオボタンを非表示にする必要があります。

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

無線入力タグに「カスタム」クラスを追加します。
それです。これはトリックです！ ;-)