Markieren von Kontrollkästchen und Optionsfeldern mit jQuery.

Question

Ich habe Probleme, Kontrollkästchen und Optionsfelder hervorzuheben, die ausgewählt wurden. Doing .css("border", "1px solid red") oder .css("background-color", "yellow") scheint nicht zu funktionieren.

Anders als das Standard-Häkchen oder das ausgefüllte Optionsfeld muss ich feststellen, dass diese Kontrollkästchen oder Optionsfelder angeklickt wurden, indem Sie es irgendwie markiert haben.

HTML Beispiele

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

Answer 1

Wenn Sie den Browser-Standarddarstellung der Kontrollkästchen behalten wollen, dann ist es nicht zu viel Sie können mit CSS-Styling tun. Ein nicht standardmäßiges Ankreuzfeld wird nicht mit Rahmen oder Hintergrundfarbe erreicht, sondern mit einem Großhandelsaustausch mit neuen Grafiken, die die verschiedenen Zustände darstellen (siehe beispielsweise here und here).

Je nachdem, wie Ihr HTML strukturiert ist, können Sie jedoch mit regulärem CSS eine erfreuliche Wirkung erzielen. Zum Beispiel, wenn so etwas wie dieses:

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

Sie einen Stil wie diese anwenden können:

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

... mit CSS wie folgt aus:

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

Hier ein Beispiel: http://jsfiddle.net/redler/c3hDK/1/

Answer 2

Bitte folgen Sie diesem Link, hat es alle Infos

change checkbox border color

Answer 3

Filament Group hat auch einen Artikel, den Sie nützlich finden könnten. http://filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/