如何在 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中文网其他相关文章！