在单选按钮上执行onChange函数

在Web开发中，单选按钮（Radio Button）是一种常见的表单元素，允许用户从一组选项中选择一个。当用户选择不同的单选按钮时，通常需要执行一个onChange函数来处理相应的逻辑。

基础概念

单选按钮：一组单选按钮中只能有一个被选中。
onChange事件：当单选按钮的值发生变化时触发的事件。

类型

HTML原生单选按钮：使用<input type="radio">标签。
自定义样式单选按钮：通过CSS和JavaScript实现自定义外观的单选按钮。

应用场景

表单提交：用户需要在多个选项中选择一个进行提交。
动态内容更新：根据用户的选择动态更新页面内容。
状态管理：在单页应用（SPA）中管理应用状态。

示例代码

以下是一个简单的示例，展示了如何在单选按钮上执行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>
        <label>
            <input type="radio" name="option" value="option1" onChange="handleRadioChange(event)"> Option 1
        </label>
        <br>
        <label>
            <input type="radio" name="option" value="option2" onChange="handleRadioChange(event)"> Option 2
        </label>
        <br>
        <label>
            <input type="radio" name="option" value="option3" onChange="handleRadioChange(event)"> Option 3
        </label>
    </form>

    <script>
        function handleRadioChange(event) {
            console.log('Selected option:', event.target.value);
            // 在这里添加你的逻辑处理代码
        }
    </script>
</body>
</html>