Highlighting checkboxes and radio buttons with jQuery.

Question

I am having problems highlighting the checkboxes and radio buttons that have been selected. Running .css("border", "1px solid red")or .css("background-color", "yellow")not working.

Besides the default checkbox or the filled radio button, I need to determine that these checkboxes or radio buttons were clicked, highlighting it somehow.

HTML examples

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

Answer 1

, CSS. , , (. , ).

, , HTML, css. , - :

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

:

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

... css :

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

: http://jsfiddle.net/redler/c3hDK/1/

Answer 2

, ,

Answer 3

, . http://filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/