使用 HTML 單選按鈕的正確方法？

Question

我有 3 個單選按鈕。 我希望它們像單選按鈕一樣：如果用戶單擊一個，則無法單擊另一個。 但不知何故，我的按鈕就像復選框一樣，用戶可以選擇所有 3 個。這是我的代碼，我錯過了什么？ 謝謝 ！

<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
<label for="input-status1" ></label>
<input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status1" data-label="Option 1" data-mask="radiobutton" value="1">
<label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
<label for="input-status2" ></label>
<input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status2" data-label="Option 2" data-mask="radiobutton" value="2">
<label class="radio-label">Option 2</label></div>
<div class="form-item" id="form-item-hi_status3">
<label for="input-status3" ></label>
<input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status3" data-label="Option 3" data-mask="radiobutton" value="3"><label class="radio-label">Option 3</label>
</div>

這是顯示問題的圖像。 我不使用 W3Schools 作為學習資源，我只是使用他們的 HTML 編輯器來展示示例。

Answer 1

組中的所有單選按鈕的name屬性必須具有相同的值。 這就是使它們相互排斥的原因。

這是<input type='radio'> 的文檔，其中包括：

“名稱”設置是單選按鈕的一個重要屬性，因為它標識了單選按鈕屬於哪個組。 由於單選按鈕組作為一個單元，您必須為所有相關的單選按鈕指定一個通用名稱。 當兩個或多個單選按鈕共享一個名稱時，選擇其中一個按鈕將取消選擇所有具有相同名稱的其他按鈕。 如果在一個頁面上有多個單選按鈕組，則不同組中的按鈕必須具有不同的“名稱”屬性。

Answer 2

單選按鈕使用name屬性組合在一起。 給它們起相同的name 。

<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
   <label for="input-status1" ></label>
   <input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status" data-label="Option 1" data-mask="radiobutton" value="1">
   <label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
   <label for="input-status2" ></label>
   <input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status" data-label="Option 2" data-mask="radiobutton" value="2">
   <label class="radio-label">Option 2</label>
</div>
<div class="form-item" id="form-item-hi_status3">
   <label for="input-status3" ></label>
   <input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status" data-label="Option 3" data-mask="radiobutton" value="3">
   <label class="radio-label">Option 3</label>
</div>