チェックボックスをオンにしてクリアするCSSにラジオボタンを追加する

Question

ラジオボタンをオンにしてチェックをつけてそれをクリアするにはどうすればよいですか？私はいくつかの方法を試みました。それはクリアではありません。

$('input:radio').on('click', function() { 
    var $field_type = $("[name=field]:checked"); 
    #and other field types doing the same thing 
    $("label[for='" + $field_type.attr('id') + "']").css({'border': '2px solid #333'}) 

$("label[for='" + $(this).attr('id') + "']").css({'border': '2px solid #333'})も試しました。それは同じことをします。

Answer 1

$('input:radio').on('click', function() { 
 
    $('input[name="RD"]').next().css({'border': 'none'}); 
 
    $("label[for='" + $(this).attr('id') + "']").css({'border': '2px solid #333'}) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="radio" name="RD" id="RD1"/><label for="RD1">radio1</label> 
 
<br> 
 
<input type="radio" name="RD" id="RD2"/><label for="RD2">radio2</label>

Answer 2

最善のアプローチは、単にラジオボタンがチェックされているときで蹴るCSSセレクタを書くことです。 JavaScriptは必要ありません。

ただし、すべてのブラウザでラジオボタンのスタイルを自由に変更できるわけではありません。しかし、彼らと一緒に行くラベル要素を簡単にスタイリングすることができます。

/* This rule will only be appled when the radio button is selected. 
 
    but, not all browsers allow radio button styling.    */ 
 
input[type='radio']:checked { 
 
    background-color:yellow; 
 
} 
 

 
/* This rule will affect the label that comes after the checked radio button: */ 
 
input[type='radio']:checked + label { 
 
    border:1px solid red; 
 
}

<input type="radio" name="test" id="test" value="on"><label for="test">On</label> 
 
<input type="radio" name="test" id="test2" value="off"><label for="test2">Off</label>

Here's an interesting linkボタンをカスタマイズして簡単にマークをチェックする方法を示しています。

Answer 3

あなたがあなたの質問に関連するHTMLを追加することを

radiobutton:checked { 
    check-radio-button-style: whatever; 
} 

radiobutton { 
    un-checked-style: whatever; 
}