Forms 选择项目后设置所有未选中复选框的样式

Forms 选择项目后设置所有未选中复选框的样式,forms,css,radio-button,targeting,Forms,Css,Radio Button,Targeting,我目前正在设计一个表单的样式,它已经使用了复选框技巧来设计标签的样式,以显示我希望它们的外观,到目前为止,我已经成功地做到了这一点。但是,我的目标是让所有复选框都正常显示,但是一旦选择了一个项目,我希望所有剩余的未选中框都降低不透明度 我已接近我的目标,如下所示: input[type=radio]:checked+label { opacity: 1; } input[type=radio]:not(:checked)+label { opacity: 0.5; } 我可以

我目前正在设计一个表单的样式,它已经使用了复选框技巧来设计标签的样式,以显示我希望它们的外观,到目前为止,我已经成功地做到了这一点。但是,我的目标是让所有复选框都正常显示,但是一旦选择了一个项目,我希望所有剩余的未选中框都降低不透明度

我已接近我的目标,如下所示:

input[type=radio]:checked+label {
    opacity: 1;
}

input[type=radio]:not(:checked)+label {
    opacity: 0.5;
}
我可以按照我的要求设置所有选中和未选中的样式。问题是,默认情况下,所有复选框都未选中,因此所有项目都会自动显示,并降低不透明度,直到选中某个项目为止

如果有一种方法仅在选中某个项目后才将降低的不透明度应用于未选中的项目,我可以使用一些帮助来了解如何进行。只使用CSS的解决方案更可取,但如果需要,我愿意使用javascript/jquery。谢谢

编辑:这是一个粗略的演示,展示了我的困境

这里是一个更新版本。我所补充的是:

$("input[type=radio]").click(function(){
    $("input[type=radio]:checked+label").css("opacity", "1");
  $("input[type=radio]:not(:checked)+label").css("opacity", "0.5");
});

代码只是使用jquery来检测单击单选按钮的时间,然后将不透明度设置为1,同时将其他设置为0.5

欢迎使用堆栈溢出!寻求调试帮助的问题应包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请看:。很高兴提供帮助,您可以添加您的HTMLY吗?您需要js来完成此任务。谢谢您的指点Gerardo。我将习惯于为将来的请求提供一个JSFIDLE演示。以下是我迄今为止的工作:我将探索一些可能的JS解决方案。如果有任何您可能熟悉的演示或教程可以帮助我发现解决方案,请提供任何指导!