如何创建带图像的单选按钮

Question

我想要一个带图像而不是文字的单选按钮。所以我希望有一个男性和女性的形象，而不是男性和女性的文字。这可以使用标准HTML实现，还是必须使用jQuery？我该怎么做？

Answer 1

使用<label>元素托管您的图片，如下所示：

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