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

Question

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

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

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

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

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

如果有一种方法可以仅在选中某个项目后才将降低的不透明度应用于未选中的项目，我可以借助一些帮助来了解具体方法。 CSS-only 解决方案更可取，但我愿意在必要时使用 javascript/jquery。谢谢！

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

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

Answer 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

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

Styling all unchecked checkboxes after an item is selected

forms

css

radio-button

targeting