单击选中div中最近的单选按钮

基础概念

在前端开发中，div 是一个通用的容器元素，用于对其他 HTML 元素进行分组和布局。单选按钮（radio button）是一种用户界面元素，允许用户在多个选项中选择一个。

类型

单选按钮主要有两种类型：

静态单选按钮：直接在 HTML 中定义，用户只能选择其中一个选项。
动态单选按钮：通过 JavaScript 动态生成，可以根据用户输入或其他条件动态调整选项。

应用场景

表单选择：在用户注册、登录等表单中，常用于选择性别、职业等。
配置选项：在软件设置中，用于选择不同的配置选项。
数据筛选：在数据展示页面，用于筛选特定条件的数据。

问题描述

单击选中 div 中最近的单选按钮。

原因分析

当用户点击某个元素时，希望选中该元素内部或附近最近的单选按钮。这通常涉及到事件冒泡和 DOM 元素的查找。

解决方案

可以使用 JavaScript 来实现这一功能。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click to Select Radio Button</title>
</head>
<body>
    <div id="container">
        <p>Click anywhere in this div to select the nearest radio button.</p>
        <input type="radio" name="option" value="1"> Option 1
        <input type="radio" name="option" value="2"> Option 2
        <input type="radio" name="option" value="3"> Option 3
    </div>

    <script>
        document.getElementById('container').addEventListener('click', function(event) {
            const target = event.target;
            let nearestRadioButton;

            // Traverse up the DOM tree to find the nearest radio button
            while (target && target.tagName !== 'INPUT' || target.type !== 'radio') {
                target = target.parentNode;
            }

            if (target && target.tagName === 'INPUT' && target.type === 'radio') {
                nearestRadioButton = target;
                // Deselect all other radio buttons with the same name
                const radios = document.getElementsByName(nearestRadioButton.name);
                radios.forEach(radio => {
                    if (radio !== nearestRadioButton) {
                        radio.checked = false;
                    }
                });
                nearestRadioButton.checked = true;
            }
        });
    </script>
</body>
</html>