Question

I have a checkbox list. I would like to change the style in order to highlight items differently. Please see first and second link showing what I need.

My problem is that the html code doesn’t change when an item is selected. I need something like class=”selected”, I guess…

http://dl.dropbox.com/u/72686/Picture%201.png

http://dl.dropbox.com/u/72686/viewsFilter2.png

thanks

Answer 1

Rohancragg’s answer is good, but I’d encourage your urge to use a class name for control. You don’t give HTML, but assuming there’s a containing element around your label and checkbox, doing

$("#content input[type='checkbox'], #content label").click(function(){
  $(this).parent().toggleClass("selected");
});

(with #content just being some larger container they’re all in, so you don’t accidentally apply styles to things outside the area you’re interested in) should work. Then in your CSS you can apply styles to several elements and not have to edit your jQuery just to change styles.

.selected { background-color:blue; }
.selected label { font-weight:bold; color:#ffffff; }

and so on.