使用单选按钮之类的按钮

Question

我想让用户在一组选项之间进行选择，而不是单选按钮和描述的列表，我希望按钮上有描述（看起来更好，不那么模棱两可）。 但是，最好还有某种方式来知道将按钮组“设置”为什么。 这是为了使其像单选按钮一样工作。

有标准的方法吗？ 我希望能够保证可以轻松识别当前选择的选项（如果必须这样做，请手动分配颜色）。

目前我不确定的是，如果我只是尝试为多个按钮分配相同的name ，就像我对单选按钮所做的那样，它是否可以在大多数浏览器上正常工作。

Answer 1

使用标签扩展单选按钮的单击区域。

<label class="radioLabel"><input type="radio" value="0" /> None</label>

现在，设置标签样式，使其看起来像一个按钮。 要使标签具有其他视觉效果，例如将鼠标悬停/不活动/选定，请使用javascript向标签添加/删除类并订阅鼠标事件（悬停，单击等）

您可以使用CSS隐藏单选按钮，但是除非您将图像设置为各种状态（不活动/选定/鼠标悬停）的背景，否则我不建议这样做。

Answer 2

视觉显示是CSS和HTML的问题。 标签可以与单选按钮相关联，方法是在两个标签之间都有一个框形边框，以便对其进行可视化分组。 略微改变背景颜色也会有所帮助。 要将它们包装在一起，请将按钮放在标签下方。 它所占用的空间不应超过一个按钮，并且您可以保存一段脚本。

喜欢：

<style type="text/css">
.aButton {
  border: 1px solid #bbbbbb;
  background-color: #eeeeee;
  margin: 1px;
}
</style>


<table>
  <tr>
    <td><label class="aButton" for="b0">Yes<input type="radio" name="group1" id="b0"></label>
        <label class="aButton" for="b1">No<input type="radio" name="group1" id="b1"></label>
        <label class="aButton" for="b2">Maybe<input type="radio" name="group1" id="b2"></label>
</table>