正文

轻松掌握：JavaScript快速获取选中radio的方法及实战案例

/0 浏览量
0716

在Web开发中，radio按钮是用户进行单选选择的一种常见控件。有时候，你可能需要获取用户选中的radio按钮的值，这在表单验证、数据提交等场景中尤为重要。本文将详细介绍如何在JavaScript中快速获取选中的radio按钮，并提供实战案例。

获取选中radio的方法

要获取选中的radio按钮，我们可以通过以下几种方法实现：

1. 通过checked属性

每个radio按钮都有一个checked属性，当该属性为true时，表示该radio按钮被选中。我们可以遍历所有的radio按钮，检查checked属性，从而找到被选中的radio按钮。

// 假设radio按钮的name属性都是"gender"
var radios = document.getElementsByName("gender");
for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
        console.log("选中的radio值是：" + radios[i].value);
        break;
    }
}

2. 通过querySelector或querySelectorAll

querySelector和querySelectorAll是DOM操作中的两个非常有用的方法，可以用来查找页面中的元素。通过这两个方法，我们可以直接获取选中的radio按钮。

// 使用querySelector获取选中的radio按钮
var selectedRadio = document.querySelector('input[type="radio"][name="gender"]:checked');
console.log("选中的radio值是：" + selectedRadio.value);

// 使用querySelectorAll获取所有radio按钮，然后遍历找到选中的radio按钮
var radios = document.querySelectorAll('input[type="radio"][name="gender"]');
for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
        console.log("选中的radio值是：" + radios[i].value);
        break;
    }
}

实战案例

以下是一个简单的实战案例，演示如何使用JavaScript获取选中的radio按钮，并在用户提交表单时进行验证。

HTML结构

<form id="myForm">
    <label>
        <input type="radio" name="gender" value="male"> 男
    </label>
    <label>
        <input type="radio" name="gender" value="female"> 女
    </label>
    <button type="submit">提交</button>
</form>
<div id="result"></div>

JavaScript代码

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    var selectedRadio = document.querySelector('input[type="radio"][name="gender"]:checked');
    if (selectedRadio) {
        document.getElementById("result").textContent = "选中的性别是：" + selectedRadio.value;
    } else {
        document.getElementById("result").textContent = "请选择性别";
    }
});

在这个案例中，当用户提交表单时，JavaScript会阻止表单的默认提交行为，然后获取选中的radio按钮，并在页面上显示选中的性别。如果用户没有选择性别，则会提示用户选择性别。

通过以上方法，你可以轻松地在JavaScript中获取选中的radio按钮，并在实际项目中应用。希望本文能帮助你更好地掌握这一技能。

-- 展开阅读全文 --