Javascript 选中单选按钮时图像不透明，但需要隐藏实际按钮

我有一系列由单选按钮选择的属性。每个属性都由一个图像标识。客户端希望所选属性正常显示，但非所选属性图像不透明。我使用一些jQuery并根据单选按钮的状态应用一个类来实现这一点。 第一段强制在页面加载时，除预选选项外的任何内容都是不透明的

$(document).ready(function() {
$('input:not(:checked)').parent().addClass("nonactive");
    $('input:checked').parent().removeClass("nonactive");
});

然后这段代码处理对选择的更改

$(document).ready(function () {
$('input').click(function () {
    $('input:not(:checked)').parent().addClass("nonactive");
    $('input:checked').parent().removeClass("nonactive");
});    
});

小提琴在这里：

他现在想要的是隐藏实际的单选按钮，让图像可以点击。这两种方法都很简单，可以单独使用，但只要我将图像设置为可单击对象并隐藏实际的单选按钮，就可以尝试在单击中断时保持不透明度更改

---

您有什么建议来解决这个问题？

此方法不需要JavaScript。将单选按钮以及紧跟其后的图像放入标签中。然后可以使用

：checked

psedou类更新图像的不透明度。
单击

标签

就像单击收音机本身一样，激活其

选中的

属性

使用无线电输入进行演示

input[type=“radio”]{
显示：无；
}
输入[type=“radio”]+img{
不透明度：0.4；
过滤器：α（不透明度=0.4）；
}
输入[type=“radio”]：选中+img{
不透明度：1；
过滤器：α（不透明度=1）；
}

如果要触发按钮，则图像应位于标签内。这不是必需的。不透明度的方向不对。客户端希望所选项目是正常的，而非所选项目是不透明的。两个答案都给出了所需的效果，但是我选择了css only选项。还需要

filter:alpha（不透明=1）以处理所有browsers@DivineComedian虽然您的解决方案在原始情况下运行良好，但尝试在另一页上复制它失败。我将其追溯到属性的“输入”行中的差异。使用的是原始页面，而新页面使用了细微的差异，但出于某种原因，name=“id[1898][14]”而不是name=“id[14]”会破坏该功能。这是什么原因，因为我看不到您的代码中以任何方式引用了该名称。@我尝试使用fiddle提供的解决方案，但如果name=“id[1898][14]”而不是name=“id[14]”，这也会失败。我完全不明白为什么会发生这种情况。