单选按钮上的onchange事件

基础概念

单选按钮（Radio Button）是一种用户界面元素，允许用户在多个选项中选择一个。每个单选按钮通常都有一个唯一的值，用户只能选择其中一个。onchange 事件是一个 JavaScript 事件，当单选按钮的值发生变化时触发。

类型

单选按钮通常分为两种类型：

静态单选按钮：在页面加载时就已经确定选项。
动态单选按钮：选项可以根据用户的操作或其他事件动态生成。

应用场景

单选按钮广泛应用于各种表单中，例如：

性别选择
选项投票
配置设置

示例代码

以下是一个简单的 HTML 和 JavaScript 示例，展示了如何使用 onchange 事件处理单选按钮的变化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Button onchange Example</title>
</head>
<body>
    <form>
        <input type="radio" id="option1" name="choice" value="Option 1">
        <label for="option1">Option 1</label><br>
        <input type="radio" id="option2" name="choice" value="Option 2">
        <label for="option2">Option 2</label><br>
        <input type="radio" id="option3" name="choice" value="Option 3">
        <label for="option3">Option 3</label><br>
    </form>

    <script>
        const radioButtons = document.getElementsByName('choice');

        function handleRadioChange() {
            for (let i = 0; i < radioButtons.length; i++) {
                if (radioButtons[i].checked) {
                    console.log(`Selected: ${radioButtons[i].value}`);
                    break;
                }
            }
        }

        for (let i = 0; i < radioButtons.length; i++) {
            radioButtons[i].onchange = handleRadioChange;
        }
    </script>
</body>
</html>

参考链接

常见问题及解决方法

事件未触发：
- 确保单选按钮的 name 属性相同，以便它们属于同一组。
- 确保 JavaScript 代码在 DOM 完全加载后执行，可以使用 DOMContentLoaded 事件。
- 确保 JavaScript 代码在 DOM 完全加载后执行，可以使用 DOMContentLoaded 事件。