无线电输入的替代方案

Question

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

Answer 1

我建议使用单选按钮，因为用户可以识别这些输入，并且不需要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>

然后，您可以在标签内放置一个图像，或者更好地说，是一个背景图像来补充文本。

Answer 2

当然，为每个图像创建两个变体(普通和高亮显示)，并使用JavaScript记住选择了哪一个并切换图像。

Answer 3

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