表单 CSS：根据选中/未选中状态设置单选框的父级（标签）样式

Question

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

我要和

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

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

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

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

编辑：尼克·卡弗发布的解决方案。添加了一些内容，使其能够与单选按钮正常工作。发布完整性：

$('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>样式取决于您的标记，如果您有某种容器，每个无线电集都在其中，您可以检查其中是否没有一个:checked元素......如果它们都包含元素，则使用相同的.toggleClass()方法来设置“所有选中“课程开启或关闭。