Html 带有订单的复选框-UI/UX和技术问题

导言

HTML表单包含一个复选框元素，其中列出了各种指示符。用户可以从该列表中选择三个项目（参见图1）。提交表单后，将创建一个气泡图，x轴和y轴上各有一个指示器，第三个指示器定义气泡的大小（见图2）

图像1

图像2

问题

通过选择指标，用户无法定义所选指标的顺序。因此，用户无法定义哪个指示器位于哪个轴上，或者哪个指示器分别负责气泡大小

可用的解决方案

当然，在web表单中使用单个多选复选框字段时，（1）可以创建三个单选无线电元素，分别命名为x、y和z。或者，如果表单是ajax支持的，（2）可以显示额外的表单元素，让用户选择相应的选项

然而，对于选项（1），指标将在表格中重复三次，而对于选项（2），额外的表格元素将不在指标列表中。此外，我希望将指标保留在一个元素中，因为还有其他图表选项使用非常类似的形式（它们都是从同一个工具箱生成的），并且处理函数依赖于特定的元素名称（而不是类型）

问题

我读过关于多状态复选框的文章，但是，（唯一的）附加状态（不确定）只是一种视觉表示，从技术上讲，复选框必须仍然是选中或取消选中的

Q1：是否可以使用其他（类似）表单元素？

从我读到的内容来看，我假设这样一个元素不存在，因为我实际上要做的是发送两个值（指标id和图表表示）

Q2：有人能告诉我类似情况下的UI/UX最佳实践吗？

---

由于缺乏正确的（搜索）术语，我还没有找到解决这种或类似情况的好例子。“多状态复选框”显示了前面提到的不确定状态，“有序复选框”主要指一些MS Excel问题。

如果我想要x和z的生物量，该怎么办？
用户体验是一个非常困难的话题，拒绝用户的选择并不能让他们感到高兴

因此，我的解决方案（不是技术问题，而是UX问题）是将所有复选框转换为单选项，并添加一个附加选项（作为下拉列表或再次作为单选项），用于选择x、y或z。

---

这可以通过js轻松实现，并轻松解决手头的问题。另一个优点是，您只使用用户已经熟悉的控件，这可能是一个额外的优点：）

如果我想要x和z的生物量呢？
用户体验是一个非常困难的话题，拒绝用户的选择并不能让他们感到高兴

因此，我的解决方案（不是技术问题，而是UX问题）是将所有复选框转换为单选项，并添加一个附加选项（作为下拉列表或再次作为单选项），用于选择x、y或z。

---

这可以通过js轻松实现，并轻松解决手头的问题。另一个优点是，您只使用用户已经熟悉的控件，这可能是一个额外的优点：）

可能是这样的？每一行都有一个x，y，z（或任何它们被称为）选项：也许是这样的？每一行都有一个x、y、z（或任何它们被称为的）选项：实际上，在当前设置中不可能对多个维度使用相同的指示器。我在考虑为每个指示器创建三个单选按钮，以实现这一点。我想，我只是不愿意实现它，因为它会给整个工具带来很多变化（关于验证和提交功能）。我曾经（现在仍然）希望，有一些神奇的元素我还没有听说过事实上，在当前设置中，不可能对多个维度使用相同的指示器。我在考虑为每个指示器创建三个单选按钮，以实现这一点。我想，我只是不愿意实现它，因为它会给整个工具带来很多变化（关于验证和提交功能）。我曾经（现在仍然）希望，有一些神奇的元素我还没有听说过