如何以一种形式使用多个单选按钮和多个组，以便每行和每列只能选择 1 个按钮？

Question

我正在开发一个简单的预算计算器来接收一个 int 输入和 1-4 的优先级，用于 3 个具有自定义 int 范围的不同事物。 3x4 网格中的 AKA 单选按钮。 我只希望每行和每列选择一个按钮。

我尝试为每行的每个项目指定特定名称，但我不想为每个项目指定相同的名称。 该项目主要位于 C# 中，最终我将使用选定的按钮进行验证，以将他们的选择保存到数据库中，但我现在不用担心。

本质上，我将这段代码重复了 3 次，每个优先选项一个。

<form asp-action="Calculate" method="post">
<h4>Housing</h4>
    <label class="radio-inline">
        <input type="radio" name="A" checked>Very Little
        <input type="radio" name="B">A Normal Amount
        <input type="radio" name="C">Very Important
        <input type="radio" name="D">Extremely Important
    </label><br>

（尽量保持简单）

我的代码目前所做的是使它只能检查一个 A、B、C 或 D。 但是，我可以在同一行检查 A、B、C 和 D。 某人优先考虑所有选项是没有任何意义的。 任何帮助是极大的赞赏！

Answer 1

如果您不想对所有内容使用相同的名称，请编写 JavaScript function - 在无线电检查中调用一个删除其他已检查无线电的函数。

我不知道您的代码是什么样的，但是对于此代码段，您可以获取 class “radio-inline”下的所有input[type:radio]并类似地使用 div/label 在各个行之间进行区分。

有关使用 JavaScript 的单选按钮的选择/功能 - 请参阅： https://codepen.io/joexadrez/pen/DzctL