JavaScript：按ID分组列表并添加“全选”功能-js教程-PHP中文网

JavaScript：按ID分组列表并添加“全选”功能

碧海醫心

发布： 2025-08-31 23:52:28

原创

836人浏览过

javascript：按id分组列表并添加“全选”功能

本文旨在提供一种使用 JavaScript 对包含学生信息的列表进行分组，并为每个分组添加“全选”复选框功能的解决方案。通过使用 reduce 方法按 Student.Id 对数据进行分组，然后动态生成 HTML 结构，实现数据的可视化和交互。本文将提供详细的代码示例和解释，帮助开发者理解和应用该技术。

数据准备与分组

首先，我们需要一个包含学生信息的列表。假设我们有以下数据结构：

const res = { List:
[{"School information":{RegId: 1,Name : "SJ"},ParentInfo:{Id:0,Name:"Abc"},Student:{Id:1,Name:"Student1"}},
 {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:5,Name:"Student6"}},
 {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:1,Name:"Student3"}},
 {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:5,Name:"Student5"}},
 {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:1,Name:"Student4"}},
 {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:7,Name:"Student9"}},
 {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:7,Name:"Student11"}}]};

登录后复制

接下来，我们使用 reduce 方法根据 Student.Id 对数据进行分组。reduce 方法接受一个回调函数和一个初始值作为参数。回调函数接收累加器 a、当前值 c 和索引 i 作为参数。

const result = res.List.reduce((a,c,i)=>{
    (a[c.Student.Id]??=[]).push(c.Student.Name);
    return a;
},{});

登录后复制

这段代码的含义是：

爱图表

AI驱动的智能化图表创作平台

查看详情

立即学习“Java免费学习笔记（深入）”；

res.List.reduce((a, c, i) => { ... }, {}): 使用 reduce 方法遍历 res.List 数组。
a: 累加器，初始值为空对象 {}。它用于存储按 Student.Id 分组的结果。
c: 当前元素，即 res.List 中的一个对象。
i: 当前元素的索引。
(a[c.Student.Id] ??= []): 这部分代码是关键。它首先尝试访问累加器 a 中以 c.Student.Id 为键的属性。
- 如果该属性不存在（即，之前没有遇到过这个 Student.Id），则使用空数组 [] 作为该属性的初始值，并将其赋值给 a[c.Student.Id]。 ??= 是空值合并赋值运算符，只有当左侧的值为 null 或 undefined 时，才会将右侧的值赋给左侧。
- 如果该属性已经存在（即，之前已经遇到过这个 Student.Id），则直接使用该属性的值（一个数组）。
.push(c.Student.Name): 将当前学生的姓名 c.Student.Name 添加到对应 Student.Id 的数组中。
return a: 返回更新后的累加器 a，以便在下一次迭代中使用。

经过这段代码的处理，result 对象将包含按 Student.Id 分组的学生姓名列表。例如：

{
  "1": ["Student1", "Student3", "Student4"],
  "5": ["Student6", "Student5"],
  "7": ["Student9", "Student11"]
}

登录后复制

动态生成 HTML

接下来，我们需要将分组后的数据动态生成 HTML 结构，包括“全选”复选框和每个学生的复选框。

document.getElementById("container").innerHTML=
 Object.values(result).map(grp=>
 '<div><label>Select All Studentds <input type="checkbox" class="group"></label><br>'
 +grp.map(s=>`<label><input type="checkbox">${s}</label>`).join("<br>")+'</div>').join("");

登录后复制

这段代码的含义是：

立即学习“Java免费学习笔记（深入）”；

document.getElementById("container"): 获取 ID 为 "container" 的 HTML 元素。这个元素将用于显示生成的内容。
Object.values(result): Object.values() 方法返回一个数组，其中包含 result 对象的所有值（即，按 Student.Id 分组的学生姓名数组）。
.map(grp => ...): 对每个学生姓名数组（grp）进行映射，生成一个包含 HTML 结构的字符串。
- '<div><label>Select All Studentds <input type="checkbox" class="group"></label><br>': 为每个分组创建一个 div 元素，并在其中添加一个 "Select All Studentds" 的标签和一个复选框。这个复选框的 class 设置为 "group"，稍后将用于实现 "全选" 功能。
- grp.map(s =>${s}).join("<br>"): 对当前分组中的每个学生姓名 (s) 进行映射，生成一个包含复选框和学生姓名的标签。然后使用 <br> 将这些标签连接起来，形成一个垂直排列的列表。
- '</div>': 关闭 div 元素。
.join(""): 将所有生成的 HTML 字符串连接成一个完整的字符串。
document.getElementById("container").innerHTML = ...: 将生成的 HTML 字符串设置为 "container" 元素的 innerHTML，从而将内容显示在页面上。

实现“全选”功能

最后，我们需要实现“全选”功能，即点击“全选”复选框时，选中或取消选中该组的所有学生复选框。

document.querySelectorAll(".group").forEach(cb=>
  cb.addEventListener("click",()=>cb.closest("div").querySelectorAll(" [type=checkbox]").forEach(c=>c.checked=cb.checked)))

登录后复制

这段代码的含义是：

立即学习“Java免费学习笔记（深入）”；

document.querySelectorAll(".group"): 获取所有 class 为 "group" 的元素（即，所有的 "全选" 复选框）。
.forEach(cb => ...): 遍历每个 "全选" 复选框 (cb)。
cb.addEventListener("click", () => ...): 为每个 "全选" 复选框添加一个点击事件监听器。
cb.closest("div"): 找到当前 "全选" 复选框 (cb) 最近的父级 div 元素。这个 div 包含了当前分组的所有学生复选框。
cb.closest("div").querySelectorAll(" [type=checkbox]"): 在当前分组的 div 元素中，找到所有类型为 "checkbox" 的元素（包括 "全选" 复选框和学生复选框）。
.forEach(c => c.checked = cb.checked): 遍历当前分组的所有复选框 (c)，并将它们的 checked 属性设置为与 "全选" 复选框 (cb) 的 checked 属性相同的值。这样，当点击 "全选" 复选框时，该组的所有复选框都会被选中或取消选中。

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Grouping and Select All</title>
</head>
<body>
  <div id="container"></div>

  <script>
    const res = { List:
    [{"School information":{RegId: 1,Name : "SJ"},ParentInfo:{Id:0,Name:"Abc"},Student:{Id:1,Name:"Student1"}},
     {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:5,Name:"Student6"}},
     {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:1,Name:"Student3"}},
     {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:5,Name:"Student5"}},
     {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:1,Name:"Student4"}},
     {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:7,Name:"Student9"}},
     {"School information":{RegId: 1,Name : ""},  ParentInfo:{Id:0,Name:""},   Student:{Id:7,Name:"Student11"}}]};

    const result = res.List.reduce((a,c,i)=>{
        (a[c.Student.Id]??=[]).push(c.Student.Name);
        return a;
    },{});

    document.getElementById("container").innerHTML=
     Object.values(result).map(grp=>
     '<div><label>Select All Studentds <input type="checkbox" class="group"></label><br>'
     +grp.map(s=>`<label><input type="checkbox">${s}</label>`).join("<br>")+'</div>').join("");

    document.querySelectorAll(".group").forEach(cb=>
      cb.addEventListener("click",()=>cb.closest("div").querySelectorAll(" [type=checkbox]").forEach(c=>c.checked=cb.checked)))
  </script>
</body>
</html>

登录后复制

这段代码将生成一个包含分组学生列表和“全选”功能的 HTML 页面。

注意事项

确保 HTML 结构中存在 ID 为 "container" 的元素，用于显示生成的内容。
代码中的数据结构 res 仅为示例，实际应用中需要根据实际数据结构进行调整。
可以根据需要自定义 HTML 结构和样式。

总结

本文介绍了一种使用 JavaScript 对包含学生信息的列表进行分组，并为每个分组添加“全选”复选框功能的解决方案。通过使用 reduce 方法按 Student.Id 对数据进行分组，然后动态生成 HTML 结构，实现数据的可视化和交互。该技术可以应用于各种需要对数据进行分组和批量操作的场景。

以上就是JavaScript：按ID分组列表并添加“全选”功能的详细内容，更多请关注php中文网其它相关文章！