js radio checked

作者：Angel★狂龙发布日期:2025-07-13 浏览:47

<!DOCTYPE html>
<html>
<head>
    <title>JS Radio Checked 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
    </form>

    <button onclick="checkRadio()">Check Selected</button>

    <script>
        function checkRadio() {
            // 获取所有名为 "gender" 的单选按钮
            var radios = document.getElementsByName('gender');

            // 遍历单选按钮，检查哪个被选中
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    alert('You selected: ' + radios[i].value);
                    return;
                }
            }
            alert('No radio button is selected!');
        }
    </script>
</body>
</html>

解释说明：

HTML部分:
- 创建了一个包含三个单选按钮（<input type="radio">）的表单，分别代表“Male”、“Female”和“Other”。
JavaScript部分:
- getElementsByName('gender'): 获取所有名为 gender 的单选按钮元素。
- for 循环遍历这些单选按钮，使用 checked 属性来判断哪个按钮被选中。
- 如果找到被选中的按钮，则通过 alert 弹出框显示用户选择的值；如果没有选中任何按钮，则提示“没有选择任何单选按钮”。
按钮点击事件:
- 当用户点击“Check Selected”按钮时，会调用 checkRadio() 函数来检查并显示当前选中的单选按钮。

上一篇：js for循环异步请求按顺序执行

下一篇：js option