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

JavaScript教程：根据ID分组列表数据并添加“全选”功能

花韻仙語

发布： 2025-08-31 23:54:26

原创

162人浏览过

javascript教程：根据id分组列表数据并添加“全选”功能

本文旨在解决在JavaScript中，如何根据列表中对象的特定ID属性进行分组，并在每个分组的开头添加一个“全选”复选框的需求。我们将通过示例代码，详细讲解如何使用reduce方法实现数据分组，以及如何动态生成HTML代码以展示分组后的数据，并实现“全选”功能。

数据分组

假设我们有一个包含学生信息的列表 res.List，每个学生对象都有一个 Student.Id 属性。我们的目标是根据 Student.Id 将学生信息分组，并将相同 Id 的学生放在一组。

可以使用 reduce 方法来实现这一目标。reduce 方法对数组中的每个元素执行一个reducer函数（由你提供），并将结果汇总为单个返回值。

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;
},{});

console.log(result);

登录后复制

这段代码的解释如下：

序列猴子开放平台

具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

查看详情

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

res.List.reduce((a, c, i) => { ... }, {}): reduce 方法遍历 res.List 数组。a 是累加器，初始值为空对象 {}。c 是当前元素，i 是当前索引。
(a[c.Student.Id] ??= []): 这一行是关键。它检查累加器 a 中是否已经存在以当前学生的 Student.Id 为键的属性。如果不存在，则创建一个空数组 [] 并赋值给 a[c.Student.Id]。如果存在，则直接使用已有的数组。??= 是空值合并赋值运算符，等价于 a[c.Student.Id] = a[c.Student.Id] || []。
a[c.Student.Id].push(c.Student.Name): 将当前学生的 Student.Name 添加到以 Student.Id 为键的数组中。
return a: 返回累加器 a，以便在下一次迭代中使用。

最终，result 对象将包含以 Student.Id 为键，以学生姓名数组为值的键值对。

动态生成 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免费学习笔记（深入）”；

Object.values(result): 获取 result 对象的所有值，即包含学生姓名数组的数组。
.map(grp => ...): 对每个学生姓名数组进行遍历，生成对应的 HTML 代码。
'<div><label>Select All Studentds <input type="checkbox" class="group"></label><br>': 为每个分组创建一个 div 元素，并在其中添加一个包含“全选”复选框的 label 元素。 class="group" 用于后续的 JavaScript 代码，以便选择所有的“全选”复选框。
grp.map(s =>${s}).join("<br>"): 对每个学生姓名进行遍历，生成包含学生姓名和复选框的 label 元素，并使用 <br> 标签分隔。
.join(""): 将所有生成的 HTML 代码连接成一个字符串。
document.getElementById("container").innerHTML = ...: 将生成的 HTML 代码插入到 id 为 container 的 HTML 元素中。

对应的HTML结构如下：

<div id="container"></div>

登录后复制

实现“全选”功能

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

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.addEventListener("click", () => ...): 为每个“全选”复选框添加点击事件监听器。
cb.closest("div"): 找到当前“全选”复选框所在的 div 元素，即当前分组的容器。
cb.closest("div").querySelectorAll(" [type=checkbox]"): 选择当前分组容器中的所有复选框。
.forEach(c => c.checked = cb.checked): 将所有复选框的 checked 属性设置为与“全选”复选框的 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>

登录后复制

总结

本文详细介绍了如何使用 JavaScript 根据 ID 分组列表数据，并添加“全选”功能。通过使用 reduce 方法进行数据分组，动态生成 HTML 代码，以及添加事件监听器实现“全选”功能，我们可以高效地处理和展示分组数据。

注意事项:

代码中的 res 对象是一个示例数据，你需要将其替换为你实际的数据。
container 元素的 id 可以根据你的实际情况进行修改。
在实际项目中，你可能需要使用更复杂的 HTML 结构和 CSS 样式来美化页面。
如果你的数据量很大，可以考虑使用虚拟 DOM 等技术来提高性能。

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