正確使用單選按鈕的方法

Question

我對使用單選按鈕的正確方法感到困惑。 假設我有一組3個單選按鈕：如果它們全部具有相同的ID /名稱，它將正常工作，只能檢查一個：

<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">First radiobutton</label>
<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">Second radiobutton</label>
<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">Third radiobutton</label>

關於此方法的問題是我不知道如何識別已檢查的方法，因為它們所有人都具有相同的名稱/ ID。

另一種方法將使用不同的名稱/ ID：

<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">First radiobutton</label>
<label for="input-rb2" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb2"><label for="input-rb2" class="radio-label">Second radiobutton</label>
<label for="input-rb3" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb3"><label for="input-rb3" class="radio-label">Third radiobutton</label>

這樣我就知道如何使用JQuery來知道選中哪個，但是它將允許用戶選擇多個單選，就像它是復選框一樣。

如何解決這個難題？

謝謝 ！

Answer 1

只有單選按鈕的名稱應該相同，id是元素中的唯一屬性。 您應該使用不同的ID，也可以使用value屬性分配值。 代碼如下

<form action="">
  <input type="radio" id="1" name="gender" value="male"> Male<br>
  <input type="radio" id="2" name="gender" value="female"> Female<br>
</form>

您可以使用jQuery獲取選定的單選按鈕值，如下所示

 $("input[type='radio']").on('change', function () {
         var selectedValue = $("input[name='gender']:checked").val();
         if (selectedValue) {
               alert(selectedValue);
           }
      });

Answer 2

id是可用於在頁面上查找特定元素的關鍵字。

<input type="radio" id="radio1">one
<input type="radio" id="radio2">two

  <input type="radio" id="radio1">one <input type="radio" id="radio2">two 

您會注意到上面的片段允許您選擇兩個單選按鈕。 沒有什么可以將它們連接在一起，並且瀏覽器無法假定它們已連接。

name用於確定輸入字段中的值- 如果是單選按鈕 ，則使用多個輸入字段中的單個值。 它將單選按鈕連接在一起，說：“嘿，只允許檢查您一個人！這就是我們要使用的價值！”

<input type="radio" name="radio_group">one
<input type="radio" name="radio_group">two

  <input type="radio" name="radio_group">one <input type="radio" name="radio_group">two 

請注意，以上代碼中沒有ID。 id和name不可互換。 它們是完全獨立的屬性，旨在完成兩個完全不同的事情。

其他答案都使用JQuery，這一切都很好，但是我想舉一個普通的JS示例也很重要。

document.querySelectorAll("input[name='r_group']").forEach((radio) => {
    if (radio.checked) {
      //do whatever
    }
});

 document.querySelectorAll("input[name='r_group']").forEach((radio) => { radio.addEventListener("change", () => { if (radio.checked) alert(radio.value); }); }); 

 <input id="radio1" type="radio" name="r_group" value="one">one <input id="radio2" type="radio" name="r_group" value="two">two <input id="radio3" type="radio" name="r_group" value="three">three 

Answer 3

首先，“ id”的值對於每個元素應該是唯一的。 組中的所有元素的name屬性可以（並且應該）相同。

然后，要獲取已檢查的無線電的值，請使用：

$('input[name=name_of_your_radiobutton]:checked').val();

Answer 4

第二種方法是錯誤的，單選按鈕中的名稱用於將它們歸為同一類，只能選擇其中一個。

只需使用以下腳本-

$('input[name="input-rb1"]:checked').val();

避免使用連字符-如果可能，請在javascript中使用_