jquery - 表格 CSS : Styling a radio box's parent (label) based on checked/unchecked status

Question

所以我有一个表格。表格中提出的大多数问题都使用 radio 输入。

我要去

<label>Option1
    <input type="radio">
</label>
<label>Option2
    <input type="radio">
</label>

我正在使用 :hover 为标签设置样式，给它一个微妙的背景变化以指示您要突出显示的选项。但是，我希望所选选项的标签具有不同颜色的背景。有什么方法可以使用 CSS 来实现，还是我必须使用 jQuery？我想要做的是为选中的输入框的父级(标签)声明一个样式。

经过进一步集思广益，我想在填写所有必填字段后更改父字段集的 bkg-color。我开始觉得 jQuery 是去这里的方式..？

[注意事项:]使用 HTML5/CSS3/jQuery。只需要与 Chrome 或 Firefox 兼容。这是在笔记本电脑上本地运行的东西，所以只要它在那台电脑上运行良好，我就不必担心与旧浏览器等的兼容性问题。:)

编辑:Nick Carver 发布的解决方案。一些补充使它与单选按钮一起正常工作。发布完整性:

$('input[type="radio"]').change(function() {
    var tmp=$(this).attr('name');
    $('input[name="'+tmp+'"]').parent("label").removeClass("checked");
    $(this).parent("label").toggleClass("checked", this.selected);      
});

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

Answer 1

纯 CSS 是行不通的，因为您要为父级而不是子级设计样式。如果你在 jQuery 中这样做，你会做类似的事情:

$("fieldset :radio").change(function() {
  $(this).closest("label").toggleClass("onClass", this.checked);
});

整体<fieldset>样式将取决于您的标记，如果您有某种容器，每个 radio 都在其中，您可以检查是否没有一个有 :checked内的元素...如果它们都这样做，则使用相同的 .toggleClass() 打开或关闭“所有检查”类的方法。