2010-12-11 4 views
3

選択したチェックボックスとラジオボタンを強調表示する際に問題が発生します。 .css("border", "1px solid red")または.css("background-color", "yellow")を実行しても機能していないようです。jQueryを使用したチェックボックスとラジオボタンの強調表示。

デフォルトのチェックマークや塗りつぶしのラジオボタン以外に、チェックボックスやラジオボタンが何らかの形で強調表示されていることを確認する方法が必要です。

HTMLの例

<input type="radio" title="search" value="T" name="srchType"> 
<input type="checkbox" value="1" name="option1"> 
+0

あなたはあなたのHTMLも提供できますか? – kobe

答えて

5

あなたがチェックボックスのブラウザのデフォルトの外観を保持する場合があり、あまりありませんあなたはCSSのスタイリングで行うことができます。非標準的なチェックボックスの外観は、境界線や背景色では達成されませんが、さまざまな状態を表す新しい図形で置き換えられます(たとえばherehereを参照)。

ただし、HTMLの構造によっては、通常のCSSでうまくいく効果を得ることができます。例えば、このようなものがあるとします。このようなCSSで...

$('input:checkbox').click(function(){ 
    $(this).parent('label').toggleClass('highlight', this.checked); 
}); 

<label> 
<input id="cb1" name="cb1" type="checkbox" value="1" /> 
My Checkbox 
</label> 

をあなたはこのようにスタイルを適用することができます

label { display: block; } 
.highlight { background-color: yellow; } 

はここでの例です: http://jsfiddle.net/redler/c3hDK/1/

+1

すてきな解決策と良い回避策 – kobe

関連する問題