正文

html怎么做多级单选

技术帮
技术帮 V管理员 /88阅读/0评论
0923

在HTML中实现多级单选功能，可以通过使用JavaScript和CSS进行操作，下面将详细讲解如何一步步实现这个功能，我们需要创建一个基本的HTML结构，然后通过JavaScript为它添加交互功能。

创建HTML结构

我们从创建一个基本的HTML结构开始，这里以一个二级单选为例，演示如何实现多级单选。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多级单选示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <div class="level1">
            <input type="radio" name="level1" id="option1" value="option1">
            <label for="option1">选项1</label>
            <div class="level2">
                <input type="radio" name="level2" id="option1-1" value="option1-1">
                <label for="option1-1">选项1-1</label>
                <input type="radio" name="level2" id="option1-2" value="option1-2">
                <label for="option1-2">选项1-2</label>
            </div>
        </div>
        <div class="level1">
            <input type="radio" name="level1" id="option2" value="option2">
            <label for="option2">选项2</label>
            <div class="level2">
                <input type="radio" name="level2" id="option2-1" value="option2-1">
                <label for="option2-1">选项2-1</label>
                <input type="radio" name="level2" id="option2-2" value="option2-2">
                <label for="option2-2">选项2-2</label>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

添加CSS样式

我们需要为这个结构添加一些基本的CSS样式，以便更好地展示。

/* style.css */
.level2 {
    display: none;
    margin-left: 20px;
}

在这个样式中，我们默认将二级选项隐藏，当用户选择一级选项时，对应的二级选项才会显示。

JavaScript实现交互

html怎么做多级单选

我们使用JavaScript来实现交互功能。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    var level1Radios = document.querySelectorAll('input[name="level1"]');
    level1Radios.forEach(function(radio) {
        radio.addEventListener('change', function() {
            // 隐藏所有二级选项
            var level2s = document.querySelectorAll('.level2');
            level2s.forEach(function(level2) {
                level2.style.display = 'none';
            });
            // 显示当前选中的一级选项对应的二级选项
            var selectedLevel2 = this.nextElementSibling;
            if (selectedLevel2 && selectedLevel2.classList.contains('level2')) {
                selectedLevel2.style.display = 'block';
            }
        });
    });
});

在这段代码中，我们首先获取所有的一级选项，并为它们绑定change事件，当某个一级选项被选中时，我们遍历所有二级选项，将它们隐藏，然后只显示与当前选中一级选项对应的二级选项。

完整实现

将以上三个部分结合起来，我们就完成了一个多级单选的功能，以下是完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多级单选示例</title>
    <style>
        /* style.css */
        .level2 {
            display: none;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <!-- HTML结构 -->
    <div id="container">
        <!-- 省略上述的HTML结构 -->
    </div>
    <script>
        // script.js
        document.addEventListener('DOMContentLoaded', function() {
            // 省略上述的JavaScript代码
        });
    </script>
</body>
</html>