使用 Jquery 的单选按钮图像

Radio Button Image using Jquery

本文关键字：图像 单选按钮 Jquery 使用      更新时间：2023-09-26

我用jQuery设置了单选按钮的样式，我想使每个单选按钮都有自己独特的图像和点击的图像。但是现在我只普遍使用两个图像。

代码可以在jsFiddle上查看。

现在我只有 

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" />

然后在你的jQuery代码中，你可以像这样引用imageurl：

uncheckedImgUrl = $(this).attr("data-imageurl") + '.jpg';

如果您自己托管图像，则可以保存文件的"选定"版本，其末尾带有"-on"。这样：

checkedImgUrl = uncheckedImgUrl + '-on.jpg';

希望这有帮助

编辑：http://jsfiddle.net/dGWJp/30/

我只是对 jsfiddle 做了一个小的更改，因为我懒得为示例创建图像。此 jsfiddle 仅将"选中"图像更改为自定义图像。您现在应该有足够的信息来扩展此内容以完成查询。这是我在 swapImage 函数中所做的唯一代码更改：

checkedImgUrl = $(radio).attr("data-imageurl");
相关文章：