无线电输入的替代方案答案

【问题标题】：Alternative to radio inputs无线电输入的替代方案
【发布时间】：2010-10-17 11:01:50
【问题描述】：

我正在尝试创建一个系统，要求用户指定他们提交的内容类型，使用 PNG 图标来表示每种类型。理想情况下，我想要的是一组三个按钮（上面有图像），它们的行为类似于单选按钮 - 用户可以使用箭头键在它们之间切换，它们被视为一组，等等。然而，这似乎是不可能的，我能得到的最接近的是将图像放在预先存在的单选按钮旁边。有没有“伪造”此功能的好方法？

【问题讨论】：

标签： html css

【解决方案1】：

图片旁边的单选按钮怎么样。然后使用 JavaScript 隐藏单选按钮并在单击图像时更改（隐藏的）选定单选。将其与所选图像上的某种高亮效果相结合，您就有了一个有吸引力的界面，可以很好地降级。 JQuery 或类似的 JavaScript 库将有助于实现这一目标。

【讨论】：

我试过这个，除了“感觉”（键盘交互）丢失之外，它会起作用，而且我想不出一个恢复它的好方法。

【解决方案2】：

我建议使用单选按钮，因为用户会识别这些输入，并且它可以在没有 javascript 的情况下工作。

<form>
<input type="radio" name="sex" value="male" id="male"/><label for="male">Male</label>
<br />
<input type="radio" name="sex" value="female" id="female" /> <label for="female">Female</label>
</form>

然后，您可以在标签内放置一张图片，或者更好的是，一张背景图片来补充文本。

【讨论】：

【解决方案3】：

当然，为每个图像制作两个变体（正常和突出显示）并使用 JavaScript 记住选择了哪一个并切换图像。

【讨论】：