替代无线电输入

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库对于实现这一点很有用。