画像付きラジオボタンの作成方法

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/