如何用图像创建单选按钮 [英] how to create radio button with images

问题描述

我想要一个带有图像而不是文字的单选按钮.所以我想有一个男性和女性的形象，而不是男性和女性的文字.可以使用标准HTML来完成此操作，还是必须使用jQuery?我该怎么做?

I want to have a radio button with images instead of text. So I want to have an image of male and female instead of a text of male and female. Can this actually be done using a standard HTML or do I have to use jQuery? How do I do this?

推荐答案

使用< label> 元素托管图像，如下所示:

Use <label> elements to host your images, like this:

<input type="radio" name="sex" value="male" id="male-radio">
<label for="male-radio"><img src="male.gif"></label>

<input type="radio" name="sex" value="female" id="female-radio">
<label for="female-radio"><img src="female.gif"></label>

工作示例: http://jsfiddle.net/RichieHindle/vQwCF/

这篇关于如何用图像创建单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！