如何在 JavaScript 中高效取得選定單選按鈕的值？

在JavaScript 中存取單選按鈕值

在JavaScript 中使用單選按鈕輸入時，擷取所選選項的值至關重要。然而，在此類實現中遇到問題可能會令人沮喪。讓我們研究一個常見問題及其解決方案。

問題

考慮以下程式碼片段：

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;
    for (i=0; i <p>儘管其預期目的，此程式碼嘗試存取選定的單選按鈕時始終返回“未定義” </p><p><strong>解決方案</strong></p><p>要解決此問題，我們可以利用現代方法，使用querySelector() 方法：</p><pre class="brush:php;toolbar:false">document.querySelector('input[name="genderS"]:checked').value;

這一行程式碼通過利用querySelector() 中的:checked選擇器來擷取所選單選按鈕的值

優點

此解決方案有多項優點：

• 瀏覽器相容性：此方法可在跨平台無縫運行各種網路
• 簡單性：這是一種簡潔而直接的方法，消除了對複雜循環或迭代器的需要。
• 動態：它動態地選擇選取單選按鈕，無論其在中的位置如何DOM.

實現

HTML:

Gender: Male Female

Search

JavaScript:

function submitForm() {
    var gender = document.querySelector('input[name="genderS"]:checked').value;
    alert(gender);
}

注意：您不需要在此實作中包含 jQuery 路徑。

以上是如何在 JavaScript 中高效取得選定單選按鈕的值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！