CSS：将样式更改为复选框列表

Question

我有一个复选框列表。我想改变风格，以不同的方式突出显示项目。请参阅显示我需要的第一和第二个链接。

我的问题是，当选择一个项目时，html代码不会改变。我需要像class =“selected”这样的东西，我猜......

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

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

感谢

Answer 1

Rohancragg's answer很好，但我鼓励你使用类名来控制。您不提供HTML，但假设您的标签和复选框周围有一个包含元素，请执行

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

（#content只是一个更大的容器，他们都在，所以你不小心将样式应用到你感兴趣的区域以外的东西应该工作。然后在CSS中，您可以将样式应用于多个元素，而不必仅仅为了更改样式而编辑jQuery。

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

等等。

Answer 2

<强> This should prove useful to you, good stuff there.

Answer 3

你可以使用JQuery并设置任何jQuery(':checked')元素的样式[描述：匹配所有被检查的元素]（适用于复选框和单选按钮）。

您可以为所有相关复选框的.click事件分配一个函数 - 如页面上的示例所示：

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

对于每个选中的复选框，您需要使用.css( propertyName, value ) setter来操作css属性

不要忘记在取消选中复选框时取消选中...