js实现复选框多选

在JavaScript中实现复选框的多选功能，主要涉及到HTML、CSS和JavaScript的基本知识。以下是实现复选框多选的基础概念、优势、类型、应用场景以及具体的实现方法。

基础概念

复选框（Checkbox）是一种允许用户在一组选项中进行多选的输入控件。每个复选框都是一个独立的选项，用户可以通过点击来选择或取消选择。

优势

多选能力：用户可以选择多个选项，适用于需要多选的场景。
灵活性：可以轻松地与其他表单元素结合使用。
用户体验：直观且易于操作。

类型

标准复选框：基本的单选或多选功能。
分组复选框：通过<fieldset>和<legend>标签进行分组，提高可读性。

应用场景

用户注册时选择兴趣爱好。
商品筛选时选择多个条件。
表单提交时选择多个选项。

实现方法

以下是一个简单的示例，展示如何使用JavaScript实现复选框的多选功能，并显示选中的选项。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Multiple Selection</title>
</head>
<body>
    <form id="myForm">
        <label><input type="checkbox" name="hobby" value="reading"> Reading</label>
        <label><input type="checkbox" name="hobby" value="traveling"> Traveling</label>
        <label><input type="checkbox" name="hobby" value="sports"> Sports</label>
        <button type="button" onclick="showSelected()">Show Selected</button>
    </form>
    <div id="selectedOptions"></div>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

function showSelected() {
    const checkboxes = document.querySelectorAll('input[name="hobby"]:checked');
    const selectedOptions = Array.from(checkboxes).map(cb => cb.value);
    document.getElementById('selectedOptions').innerText = 'Selected: ' + selectedOptions.join(', ');
}

解释

HTML部分：
- 创建了一个包含三个复选框的表单，每个复选框的name属性都设置为hobby，表示它们属于同一组。
- 添加了一个按钮，当点击按钮时，调用showSelected函数。
- 创建了一个<div>元素，用于显示选中的选项。

JavaScript部分：
- showSelected函数通过querySelectorAll选择所有被选中的复选框。
- 使用Array.from将NodeList转换为数组，并使用map方法提取每个复选框的value属性。
- 将选中的选项拼接成一个字符串，并显示在页面上。