JavaScript：根据ID分组列表数据并生成带复选框的列表-js教程-PHP中文网

JavaScript：根据ID分组列表数据并生成带复选框的列表

花韻仙語

发布： 2025-08-31 23:02:01

原创

567人浏览过

javascript：根据id分组列表数据并生成带复选框的列表

本文档旨在指导开发者如何使用 JavaScript 处理包含学生信息的列表数据，并根据学生的 ID 将其分组，最终生成一个带有 "Select All Students" 复选框的 HTML 列表。通过提供的代码示例，您可以轻松地将数据转换为期望的格式，并实现全选/取消全选的功能。

数据处理与分组

假设我们有一个包含学生信息的列表 res.List，每个学生对象包含 Id 和 Name 属性。我们的目标是根据 Id 将学生分组，并为每个分组生成一个包含 "Select All Students" 复选框的列表。

首先，我们使用 reduce 方法对 res.List 进行处理，将具有相同 Id 的学生姓名放入同一个数组中。

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);
// 输出：
// {
//   1: [ 'Student1', 'Student3', 'Student4' ],
//   5: [ 'Student6', 'Student5' ],
//   7: [ 'Student9', 'Student11' ]
// }

登录后复制

这段代码的核心在于 reduce 方法的运用。它遍历 res.List 数组，并使用一个对象 a 来存储分组结果。对于每个学生对象 c，它首先获取学生的 Id，然后将学生的 Name 添加到以 Id 为键的数组中。如果该 Id 对应的数组不存在，则创建一个新的数组。

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

生成HTML列表

接下来，我们将使用 Object.values 方法将 result 对象的值（即分组后的学生姓名数组）提取出来，并使用 map 方法将其转换为 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("");

登录后复制

这段代码首先获取 ID 为 "container" 的 HTML 元素，然后将生成的 HTML 字符串赋值给它的 innerHTML 属性。Object.values(result) 返回一个包含所有学生姓名数组的数组。map 方法遍历这个数组，并为每个数组生成一个包含 "Select All Students" 复选框和学生姓名列表的 HTML 字符串。

实现全选/取消全选功能

为了实现 "Select All Students" 复选框的全选/取消全选功能，我们需要为每个复选框添加事件监听器。

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

登录后复制

这段代码首先使用 querySelectorAll 方法获取所有 class 为 "group" 的复选框元素（即 "Select All Students" 复选框）。然后，它为每个复选框添加一个 click 事件监听器。当复选框被点击时，监听器会找到包含该复选框的 div 元素，并获取该 div 元素下所有的复选框元素。最后，它将所有复选框的 checked 属性设置为与 "Select All Students" 复选框的 checked 属性相同的值，从而实现全选/取消全选功能。

完整的HTML代码

<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>

登录后复制

总结

通过以上步骤，我们成功地使用 JavaScript 将包含学生信息的列表数据根据 Id 分组，并生成了一个带有 "Select All Students" 复选框的 HTML 列表。同时，我们也实现了全选/取消全选的功能。这个方案可以应用于各种需要根据特定属性对数据进行分组并生成列表的场景。

注意事项：

确保 HTML 结构中包含一个 ID 为 "container" 的元素，用于显示生成的列表。
代码中的 res 对象是一个示例数据，你需要根据实际情况替换为你的数据源。
可以根据需要修改 HTML 字符串，以定制列表的样式和布局。

以上就是JavaScript：根据ID分组列表数据并生成带复选框的列表的详细内容，更多请关注php中文网其它相关文章！