我对 JavaScript 和基于 Web 的编程有点陌生，我正在从事的一个宠物项目将真正受益于用与单选按钮工作方式相同的实际按钮选择器替换看起来很糟糕的单选按钮。
一张图片值一千字，但显然我不能在我的声誉增加之前发布图片，所以让我试着向你描述一下。
水平单选按钮列表是文本项列表，在水平行中枚举，前面有一个可选择的“圆圈”。如果选择了一项，则填充其前面的小“圆圈”。一次只能选择列表中的一项。
水平按钮选择器列表是按钮的水平分组，每个按钮中心的文本代表要选择的项目。当您选择项目位于中心的按钮时，按钮颜色会以某种方式发生变化以显示它是所选项目。一次只能选择组中的一个按钮。
与单选按钮选择相比，按钮选择的好处是平板电脑和触摸屏用户更容易选择水平按钮选择器列表中的项目，而不是水平单选按钮列表，并且在视觉上更具吸引力。
我已经能够弄清楚如何制作垂直单选按钮和水平单选按钮，但我想扩展选择器按钮的想法并将其变成实际的按钮。任何人都可以为此提供一个起点吗？我有 30 多个“主题”需要选择，而单个“主题”最多可以选择 20 个项目，所以我希望这涉及尽可能少的编码。
谢谢！