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

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

我要去

Option1   Option2   

我正在使用标签设置样式：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); }); 

整个

样式将取决于你的标记，如果你有一些容器，每个收音机都在你可以检查是否所有这些都有一个:checked元素…如果他们都这样做，那么使用相同的.toggleClass()方法设置打开或关闭“所有已检查”类。

Answer 2

不能用vanilla CSS做到这一点。 您需要使用jQuery向添加/删除选定标签中的类的单选框添加一些onclick行为。 然后你可以将：hover类添加到你的选择器。 为了获得最佳效果，我认为您需要确保将标签设置为显示：inline-block; 为了最好的结果。