js 单选框

作者：Alexandr嫁衣° 发布日期:2026-05-16 浏览:113

<!DOCTYPE html>
<html>
<head>
    <title>JS 单选框示例</title>
</head>
<body>
    <form id="myForm">
        <input type="radio" name="gender" value="male"> 男<br>
        <input type="radio" name="gender" value="female"> 女<br>
        <input type="radio" name="gender" value="other"> 其他<br>
        <br>
        <input type="button" value="提交" onclick="getSelectedValue()">
    </form>

    <p id="result"></p>

    <script>
        function getSelectedValue() {
            var radios = document.getElementsByName('gender');
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    document.getElementById('result').innerText = '您选择的是: ' + radios[i].value;
                    return;
                }
            }
            document.getElementById('result').innerText = '请先选择一个选项';
        }
    </script>
</body>
</html>

解释说明：

HTML 部分:
- 使用 <input type="radio"> 创建单选按钮，name 属性相同的单选按钮属于同一组，一次只能选择一个。
- 提交按钮使用 <input type="button">，并绑定 onclick 事件调用 JavaScript 函数 getSelectedValue()。
JavaScript 部分:
- getSelectedValue() 函数遍历所有名为 gender 的单选按钮，检查哪个被选中。
- 如果找到选中的单选按钮，则将结果显示在页面的 <p> 标签中。
- 如果没有选中任何单选按钮，则提示用户选择一个选项。

上一篇：js buffer.from

下一篇：js select change