表单CSS:根据选中/未选中状态为单选框的父级(标签)设置样式
所以我有一个表格。 表格中提出的大多数问题都是使用无线电输入。
我要去
我正在使用标签设置样式: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); });
纯CSS没有办法,因为你是父母而不是孩子的样式。 如果你在jQuery中做到了,你会做类似的事情:
$("fieldset :radio").change(function() { $(this).closest("label").toggleClass("onClass", this.checked); });
整个
样式将取决于你的标记,如果你有一些容器,每个收音机都在你可以检查是否所有这些都有一个:checked
元素…如果他们都这样做,那么使用相同的.toggleClass()
方法设置打开或关闭“所有已检查”类。
不能用vanilla CSS做到这一点。 您需要使用jQuery向添加/删除选定标签中的类的单选框添加一些onclick行为。 然后你可以将:hover类添加到你的选择器。 为了获得最佳效果,我认为您需要确保将标签设置为显示:inline-block; 为了最好的结果。