如何以一種形式使用多個單選按鈕和多個組，以便每行和每列只能選擇 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