javascript - 像单选按钮一样使用按钮

Question

我想让用户在一组选项之间进行选择，但我希望按钮上有描述，而不是单选按钮和描述列表(看起来更好且更明确)。但最好还有某种方法来知道按钮组被“设置”为什么。这是为了使其像单选按钮一样工作。

有标准方法可以做到这一点吗？我希望能够保证当前选择的选项很容易识别(如果我必须这样做，则手动分配颜色)。

目前我不确定的是，如果我只是尝试分配具有相同名称的多个按钮，它是否会工作(在大多数浏览器上)，就像我对单选按钮。

Answer 1

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

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

现在，设置标签样式，使其看起来像一个按钮。要为标签提供其他视觉效果，例如鼠标悬停/非事件/选定，请使用 javascript 向标签添加/删除类并订阅鼠标事件(悬停、单击等)

您可以使用 CSS 隐藏单选按钮，但除非您将图像设置为各种状态(非事件/选定/鼠标悬停)的背景，否则我不会推荐它。