Question

我有以下代码：

 <section class="mood" role="listbox">
 <a class="#" role="option">1<img src="http://s.goose.im/emoji/emoji_u1f622.png"></a>
 <a class="#" role="option">2<img src="http://s.goose.im/emoji/emoji_u1f610.png"></a> 
 <a class="#" role="option">3<img src="http://s.goose.im/emoji/emoji_u1f603.png"></a>
 <a class="#" role="option">4<img src="http://s.goose.im/emoji/emoji_u1f60a.png"></a>
</section>`

我希望这些图像充当无线电输入按钮。我怎么做？另外，我是初学者，我不想搞砸<a>标记的CSS。我可以在没有输入标签的情况下使用某些脚本吗？如果我使用输入标签，我是否仍然可以避免重做css？

Answer 1

为什么不使用带标签的常规HTML表单？

<强> HTML：

<form class="mood" role="listbox">
    <label>
        <input type="radio" name="radio" value="1" /><img src="http://s.goose.im/emoji/emoji_u1f622.png"></label>
    <label>
        <input type="radio" name="radio" value="2" /><img src="http://s.goose.im/emoji/emoji_u1f610.png"></label>
    <label>
        <input type="radio" name="radio" value="3" /><img src="http://s.goose.im/emoji/emoji_u1f603.png"></label>
    <label>
        <input type="radio" name="radio" value="4" /><img src="http://s.goose.im/emoji/emoji_u1f60a.png"></label>
</form>

图像也将作为收音机盒，即单击图像时可以选择一个收音机盒。

演示： http://jsfiddle.net/lotusgodkk/GCu2D/1070/

如何在锚标签中使用图像作为输入？

1 个答案: