ラジオボタンの切り替えスタイルがオンになっています

Question

ラジオボタンがあります。

<ul class="ProductOptionList"> 
<li> 
<label> 
<input class="RadioButton" type="radio" value="157" name="variation[1]"/> 
Lemon (200 ml) 
</label> 
</li> 
<li> 
<label> 
<input class="RadioButton chosen" type="radio" value="160" name="variation[1]"/> 
Lemon and Herbs (200 ml) 
</label> 
</li> 
</ul> 

私は選択されたものを強調表示したいと思います。

私はこのコードを使用：

$('input.RadioButton').click(function() { 
    var chkbox = $(this); 
     chkbox.is(':checked') ? 
     chkbox.addClass('chosen') : $chkbox.removeClass('chosen'); 

をしかし、人はそれが動作し、クラスを適用する一つのバリエーションをクリックした場合、彼らは第二をクリックした場合、それは第二にクラスを適用するが、からクラスを削除するdoesntの最初。どのようにクラスを削除するのですか？感謝！ ありがとう！

Answer 1

クリックしたラジオでのみ機能を有効にするためです。あなたはすべての無線から「選ばれた」クラスを削除し、あなただけのクリック1にクラスを割り当てる。このように

$("input.RadioButton").click(function(){ 
    $("input.RadioButton").removeClass('chosen'); 
    $(this).addClass('chosen'); 
}) 

：これを試してみてください。あなたはこのような属性を経由して、それらを選択することができますので、

Answer 2

まず第一に、あなたはクラスとして「ラジオボタン」を持っている必要はありません...

$("input[type=radio]") 

第二に、あなたはそれを適用する前に、選択したクラスを削除する必要があります〜this ...

$("input[type=radio]").click(function() { 
    // Remove the class from all inputs that have it 
    $("input[type=radio].chosen").removeClass("chosen"); 

    // Add it to current 
    $(this).addClass("chosen"); 
});