在 JavaScript 中獲取選定的單選按鈕值

Shraddha Paghdar 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 document.querySelector() 獲取單選元素值
  2. 通過 JavaScript 中的 getElementsByName() 獲取 Radio 元素值
在 JavaScript 中獲取選定的單選按鈕值

單選按鈕是一個 HTML 輸入元素,它指定了使用者可以從中選擇任何選項的各種選項。在本文中,我們將學習如何在 JavaScript 中獲取這個 HTML 元素的值。

在 JavaScript 中使用 document.querySelector() 獲取單選元素值

它是 JavaScript 提供的基本 document 技術,並返回其 selector 匹配所需 selector 的 Objects/NodeList 部分。querySelector()querySelectorAll() 之間的唯一區別是首先返回單個匹配項物件,然後返回所有匹配項的物件。如果傳遞了無效的 selector,則返回 SyntaxError

語法:

document.querySelector($selector);

selector 是指定類的匹配條件或識別符號的必需引數。此字串必須是有效的 CSS 選擇字串。它返回 DOM 中滿足 selector 條件的第一個匹配元素物件。

有關更多資訊,請閱讀 querySelector 方法的文件。

示例程式碼:

<label for="gender">Gender: </label>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female" checked="checked">Female

<button type="button" onclick="console.log(document.querySelector('input[name=gender]:checked').value)">
Click to check
</button>

在上面的程式碼中,我們定義了兩個輸入元素,其值為 MaleFemale。當我們使用 querySelector() 訪問文件時,它會找到所有名稱屬性與性別匹配且已檢查屬性設定為 true 的節點。由於這是一個物件,我們可以直接提取值。如果你需要查詢多個匹配元素,可以使用 querySelectorAll() 並遍歷陣列,並列印所有值。上面程式碼的輸出將如下所示:

輸出:

Female

通過 JavaScript 中的 getElementsByName() 獲取 Radio 元素值

這是 JavaScript 提供的基本 document 技術,並返回其 name 屬性與所需名稱匹配的 Objects/NodeList 部分。此 NodeList 表示使用索引可訪問的節點陣列,並且此索引與任何其他陣列一樣以 0 開頭。

語法:

document.getElementsByName(name);

name 是一個必需引數,用於指定必須匹配的 HTML 屬性的 name。如果找到任何匹配的元素,則返回匹配的 DOM 元素的物件;否則,它返回 null

getElementsByNamequerySelectorAll 之間的唯一區別是 getElementsByName 首先僅選擇指定名稱屬性與給定名稱匹配的那些元素。相比之下,querySelectorAll 可以使用任何選擇器,這為其提供了更大的靈活性。

有關更多資訊,請閱讀 getElementById 方法的文件。

示例程式碼:

<label for="gender">Gender: </label>
<input type="radio" name="gender" value="Male" checked="checked">Male
<input type="radio" name="gender" value="Female">Female
const radios = document.getElementsByName('gender');

for (var i = 0; i <  radios.length; i++) {
  if (radios[i].checked) {
    console.log(radios[i].value);
    break;
  }
}

在上面的程式碼中,我們定義了兩個輸入元素,其值為 MaleFemale。當我們使用 getElementsByName() 訪問文件時,它會找到 name 屬性與 name 匹配的所有節點並返回 NodeList。由於這是一個陣列,我們可以用 [0] 提取第一個匹配元素。如果找到多個匹配項,你可以瀏覽陣列並列印所有值。上面程式碼的輸出將如下所示:

輸出:

Male
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn