JS选中radio|极客笔记

JS选中radio

在网页开发中，经常会遇到需要用户选择一个选项的情况。其中，单选按钮（radio button）是一种常见的选择方式，用户只能选择其中的一个选项。在使用JavaScript操作单选按钮时，我们可能需要选中某个选项，或者获取用户当前选中的选项。本文将详细介绍如何使用JavaScript来选中单选按钮。

HTML中的单选按钮

在HTML中，单选按钮使用<input>标签的type属性为”radio”来定义。我们可以定义多个相同name属性的单选按钮，这样它们就会成为一组，用户只能选择其中的一个。

下面是一个简单的HTML代码示例，包含三个单选按钮：

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other

上述代码中，三个单选按钮的name属性均为”gender”，这样它们就会成为一组。用户只能选择其中一个选项。

选中单选按钮

要通过JavaScript选中一个单选按钮，我们可以通过修改其checked属性来实现。以下是一个JavaScript函数，可以选中name为”gender”的单选按钮中value为”female”的选项：

function selectFemale() {
    document.querySelector('input[name="gender"][value="female"]').checked = true;
}

在上述代码中，使用document.querySelector()方法来获取name为”gender”且value为”female”的单选按钮元素，并将其checked属性设置为true，表示选中该选项。

获取选中的单选按钮

有时候，我们需要获取用户当前选中的单选按钮的值。这个时候，我们可以通过循环遍历所有名称为”gender”的单选按钮，找出其中被选中的那个。

以下是一个JavaScript函数，可以获取name为”gender”的单选按钮中被选中的选项的值：

function getSelected() {
    var radios = document.querySelectorAll('input[name="gender"]');

    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            return radios[i].value;
        }
    }

    return null; // 如果没有选中的选项
}

在上述代码中，首先使用document.querySelectorAll()方法获取所有name为”gender”的单选按钮元素，然后通过循环遍历每个单选按钮，找出其中被选中的那个，返回其值。如果没有选中的选项，则返回null。

示例代码运行结果

为了验证以上的代码，我们可以在一个HTML文件中添加一个按钮，点击按钮后调用上述的选中和获取函数，并将结果显示在页面上。以下是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript选中单选按钮示例</title>
</head>
<body>
    <input type="radio" name="gender" value="male"> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other<br>

    <button onclick="selectFemale()">Select Female</button>
    <button onclick="alert(getSelected())">Get Selected</button>

    <script>
        function selectFemale() {
            document.querySelector('input[name="gender"][value="female"]').checked = true;
        }

        function getSelected() {
            var radios = document.querySelectorAll('input[name="gender"]');

            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    return radios[i].value;
                }
            }

            return null;
        }
    </script>
</body>
</html>

点击”Select Female”按钮后，会选中单选按钮中value为”female”的选项；点击”Get Selected”按钮后，会弹出当前选中的单选按钮的值。