js radio

作者：嗜血之舞发布日期:2026-04-01 浏览:21

<!DOCTYPE html>
<html>
<head>
    <title>JS Radio Example</title>
</head>
<body>
    <form id="myForm">
        <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 type="button" onclick="checkRadio()">Submit</button>
    </form>
    <p id="result"></p>

    <script>
        function checkRadio() {
            var radios = document.getElementsByName('gender');
            var result = document.getElementById('result');
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    result.innerHTML = "You selected: " + radios[i].value;
                    return;
                }
            }
            result.innerHTML = "No selection made.";
        }
    </script>
</body>
</html>

解释说明：

HTML部分：
- 创建了一个包含三个单选按钮（<input type="radio">）的表单，分别代表“Male”、“Female”和“Other”。
- 每个单选按钮都有相同的name属性值 (gender)，确保它们属于同一组，用户只能选择其中一个。
- 添加了一个提交按钮，点击时调用JavaScript函数checkRadio()。
JavaScript部分：
- checkRadio()函数遍历所有名为gender的单选按钮。
- 如果某个单选按钮被选中（即checked属性为true），则将该按钮的值显示在页面上的<p>元素中。
- 如果没有单选按钮被选中，则显示提示信息“No selection made.”。

上一篇：js radio触发选中事件

下一篇：js 鼠标右键事件