Javascript 使用CSS/JS/JQuery定制Radiobutton

我有一个我正在使用的小web管理工具，它允许用户查看和编辑DB对象的属性。大多数设置都是“是/否/不知道”类型属性

有相当多的设置显示，所以管理屏幕房地产& 可用性很重要

当我第一次构建UI时，我正在上图中使用测试1。 只需说它看起来很杂乱，在UI的多个列/类别组中有几十个这样的内容。测试2稍微好一点，但不是很好

所以我想做一些类似测试3的事情。根据在html中选择的单选按钮，将显示一个不同的图像。然后点击图像，反复浏览3个选项

（如果你曾经使用过GMail实验室的功能，它可以让你的电子邮件有很多不同种类的“星星”标志，这就是你的想法）

因此，我向UI/CSS专家提出了一些问题

“测试3”是可接受/可用的解决方案吗

如果是这样，是否可以仅使用CSS和JS将radiobutton（或select/option）输入更改为该输入？（或者，如果您能为我指点教程/资源，我将不胜感激）

谢谢

---

EOC中的测试3可能是可以接受的，但测试2或选择框对于大多数用户来说更为熟悉。如果我知道我的用户有足够的技术能力来处理定制的小部件，我只会选择测试3。它看起来不像是一个交互式输入。

将单击处理程序添加到图像中。 单击open div，其中包含3个单选按钮和图像。

---

当用户选择其中一个单选按钮时，请关闭div并更改表中的图像。

循环功能对我来说似乎不可用。我认为测试2是最好的选择。 它可能看起来有点“凌乱”，但至少它是可用的。若有人需要一天填写五次这些表格，我想他会开始对骑自行车的速度感到厌烦

另一个重要的一点是：在测试2中没有默认值，这很好。因为有人忘了一行，你可以做表单验证。有了循环功能，默认值已经是答案之一，这使得在输入时更容易出错

---

如果我是你，我会参加第二次测试，把未知放在右边，这样你就有是，否，未知

测试3对我来说似乎是一个很好的解决方案。我个人唯一想更改的是图标，红色的表示“取消”，未定义的表示警告，因此它们与未定义/不支持的概念不太接近

---

然而，如果问题在于选项的数量，那么一个好的选择是按类别对选项进行分组，并且仅当用户必须与每个组进行交互时才显示/隐藏每个组（更清楚的是，您可以使用Test2）。

我认为案例三有两个大问题

• 对于用户来说，图标是可更改的并不明显，也就是说，它们是按钮
• 你无法一眼看出这些图标代表什么

问题二可以通过在图表底部的一个小的关键区域来解决，告诉他们每个按钮的意思。问题一是。。。再用力一点

我能想到的两个最明显的解决方案是在边上添加可单击的小三角形，当单击时这些三角形会更改其值，以说明这实际上是可以更改值的。另一种方法是添加一个大的工具提示，当鼠标悬停在上面时会出现，让用户可以选择更改值，并告知每个图标的含义

这里的选择基本上可以归结为本例的实际用例——由于颜色编码的值，第三种情况更为“引人注目”，但代价是可用性稍微降低，学习曲线稍微陡峭

---

---

至于技术解决方案，有很多，但是如果你想让案例二少一些混乱，我建议你看看jQueryUI的ButtonWidget——它真的可以省去实现这类事情的麻烦。看看这里：

如果我要使用测试3，我肯定会包括一个工具提示或类似的东西。对于一个不懂行的用户来说，学会如何使用它不需要太多训练，而且它会使页面变得更简单。