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