Javascript 使用Jquery的单选按钮图像

我用jQuery设计了单选按钮，我想让每个单选按钮都有自己独特的图像和点击图像。但是现在我只使用了两张图片

该代码可在上查看

现在我只有

var checkedImgUrl = 'http://b.vimeocdn.com/ps/879/87952_300.jpg',
    uncheckedImgUrl = 'http://www.mediabistro.com/alltwitter/files/2011/03/twitter_block.gif';

---

如何使这些图像中的每一个都有自己独特的图像和单击的图像

一种方法是向保存图像url的单选按钮添加属性，例如：

<input name="version" type="radio" value="ATT" data-imageurl="radioimage1" />

如果您自己托管这些图像，您可以保存文件的“选定”版本，并在文件末尾添加like'-on'。像这样：

checkedImgUrl = uncheckedImgUrl + '-on.jpg';

希望这有帮助

编辑：

我只是对JSFIDLE做了一个小小的更改，因为我太懒了，无法为示例创建图像。此JSFIDLE仅将“选中”图像更改为自定义图像。您现在应该有足够的信息来展开此操作以完成查询。这是我在swapImage函数中所做的唯一代码更改：

checkedImgUrl = $(radio).attr("data-imageurl");

---

你所说的唯一图像是什么意思？每个收音机都有自己的图像，现在它们都共享一个图像。@soniccol-当然，它们共享同一个图像。你在期待什么？是的，但我想找到一种方法，这样他们每个人都有自己的，但我不知道如何应用。有人帮我做了这个。你认为你可以把它集成到JSFIDLE中给我看一个例子吗？不过问题是，我是否需要留下

var checkedImgUrl=http://b.vimeocdn.com/ps/879/87952_300.jpg';既然我不再使用悬停图像了？或者我可以删除它或删除链接吗？也可以用同样的方法来处理不同的未选择的图像吗？对于未选择的图像，请参阅我的答案，让所有人共享具有标准后缀的已选择/未选择的图像，以便您可以轻松地修改代码中的“数据图像URL”。
checkedImgUrl = $(radio).attr("data-imageurl");