CSS: change style to checkbox list

Question

hi,

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

This should prove useful to you, good stuff there.

Answer 2

You could use JQuery and style any elements that are jQuery(':checked') [Description: Matches all elements that are checked] (works for checkboxes and radio buttons).

You would assign a function to the .click event of all of the checkboxes in question - as in the example on the page:

$(":checkbox").click(countChecked);

To each checked checkbox you would want to use the .css( propertyName, value ) setter to manipulate the css attributes

Don't forget to also unstyle the checkboxes as they become unchecked...

Answer 3

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.