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

【问题标题】：Styling all unchecked checkboxes after an item is selected选择项目后为所有未选中的复选框设置样式
【发布时间】：2018-02-12 17:38:17
【问题描述】：

我目前正在设计一个表单，该表单已经利用复选框设置标签的样式来查看我希望它们的外观，到目前为止，我已经取得了成功。但是，我的目标是让所有复选框都正常显示，但是一旦选择了一个项目，我希望所有剩余的未选中框都降低不透明度。

我的定位已经接近了，如下所示：

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

input[type=radio]:not(:checked)+label {
    opacity: 0.5;
}

我能够按照我想要的方式设置所有选中和未选中的样式。问题是默认情况下，所有复选框都未选中，因此所有项目都会自动显示并降低不透明度，直到选中一个项目。

如果有一种方法仅在选择项目后才将降低的不透明度应用于未选中的项目，我可以在发现如何使用一些帮助方面提供帮助。纯 CSS 解决方案更可取，但如有必要，我愿意使用 javascript/jquery。谢谢！

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

https://jsfiddle.net/james_doe/wva3pdek/1/

【问题讨论】：

欢迎来到 Stack Overflow！寻求调试帮助的问题应包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example.
很高兴为您提供帮助，请您添加您的html
你需要js来完成这个
感谢 Gerardo 的指点。我将养成提供 jsfiddle 演示的习惯，其中包含我将来的请求。到目前为止，这是我的工作：jsfiddle.net/james_doe/wva3pdek/1 我将探索一些可能的 JS 解决方案来解决这个黄主义。如果有任何您可能熟悉的演示或教程可以帮助我找到解决方案，我们将不胜感激！

标签： forms css radio-button targeting

【解决方案1】：

这是更新后的jsfiddle。我只添加了：

$("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

【讨论】：