Question

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

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

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/

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

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

1 个答案: