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

在JavaScript 中存取單選按鈕值

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

問題

考慮以下程式碼片段：

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;
    for (i=0; i < sizes.length; i++) {
        if (sizes[i].checked==true) {
            return sizes[i].value;
        }
    }
}

儘管其預期目的，此程式碼嘗試存取選定的單選按鈕時始終返回“未定義”

解決方案

要解決此問題，我們可以利用現代方法，使用querySelector() 方法：

document.querySelector('input[name="genderS"]:checked').value;

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

優點

此解決方案有多項優點：

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

實現

HTML:

<form action="#n" name="theForm">
    <label for="gender">Gender: </label>
    <input type="radio" name="genderS" value="1" checked> Male
    <input type="radio" name="genderS" value="0" > Female<br><br>
    <a href="javascript: submitForm()">Search</a>
</form>

JavaScript:

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

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

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