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

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

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

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

const res = { List：[{"；学校信息"；：{RegId： 1，姓名："；SJ"；}，家长信息：{Id：0，姓名："；Abc"；}，学生：{Id：1，姓名："；Student1"；}}， {"；学校信息"；：{RegId： 1，姓名："；quot；quot；}， 家长信息：{Id：0，姓名："；quot；quot；}， 学生：{Id：5，姓名："；Student6"；}}， {"；学校信息"；：{RegId： 1，姓名："；quot；quot；}， 家长信息：{Id：0，姓名："；quot；quot；}， 学生：{Id：1，姓名："；Student3"；}}， {"；学校信息"；：{RegId： 1，姓名："；quot；quot；}，家长信息：{Id：0，姓名：quot；quot；}， 学生：{Id：5，姓名：quot；Student5quot；}}， {quot；学校信息quot；：{RegId： 1，姓名：quot；quot；}， 家长信息：{Id：0，姓名：quot；quot；}， 学生：{Id：1，姓名：quot；Student4quot；}}， {quot；学校信息quot；：{RegId： 1，姓名：quot；quot；}， 家长信息：{Id：0，姓名：quot；quot；}， 学生：{Id：7，姓名：quot；Student9quot；}}， {quot；学校信息quot；：{RegId： 1，姓名：quot；quot；}， 家长信息：{Id：0，姓名：quot；quot；}， 学生：{Id：7，姓名：quot；Student11quot；}}]}；const result = res.List.reduce((a，c，i)=gt；{ (a[c.Student.Id]??=[]).push(c.Student.Name)； return a；}，{})；console.log(result)；登录后复制

该代码的解释如下：

立即学习“Java免费学习笔记（深入）”；res.List.reduce((a， c， i) =gt； { ... }， {})：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(quot；containerquot；).innerHTML= Object.values(result).map(grp=gt； 'lt；divgt；lt；labelgt；选择所有学生 lt；input type=quot；checkboxquot； class=quot；groupquot；gt；lt；/labelgt；lt；brgt；' grp.map(s=gt；`lt；labelgt；lt；input type=quot；checkboxquot；gt；${s}lt；/labelgt；`).join(quot；lt；brgt；quot；) 'lt；/divgt；').join(quot；quot；)；登录后复制

该代码的解释如下：

立即学习“Java免费学习笔记（深入）”；Object.values(result)：获取结果对象的所有值，即包含学生姓名闹钟的备份。.map(grp =gt； ...)：对每个学生姓名闹钟进行进行，生成对应的HTML代码。'lt；divgt；lt；labelgt；Select All Studentds lt；input type="checkbox" class="group"gt；lt；/labelgt；lt；brgt；'：为每个分组创建一个div元素，并在其中添加一个包含“全选”的标签元素。class="group"用于后续的JavaScript代码，以便选择所有的“全选”表单。grp.map(s =gt；${s}).join("lt；brgt；")： 对每个学生姓名进行遍历，生成包含学生姓名和组成的标签元素，并使用 lt；brgt；标签分隔。.join("")：将所有生成的 HTML 代码连接成一个字符串。document.getElementById("container").innerHTML = ...：将生成的 HTML 代码插入到 id 为容器的 HTML 元素中。

对应的 HTML 结构如下：lt；div id=quot；containerquot；gt；lt；/divgt；登录后复制实现“全选”功能

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

document.querySelectorAll(quot；.groupquot；).forEach(cb=gt； cb.addEventListener(quot；clickquot；，()=gt；cb.closest(quot；divquot；).querySelectorAll(quot； [type=checkbox]quot；).forEach(c=gt；c.checked=cb.checked)))登录后复制

be代码的解释如下：

立即学习“Java学习笔记（深入）”；document.querySelectorAll(".group")：选择所有class为group的元素，即所有的“全选”元素。.forEach(cb免费 =gt；...)： cb.addEventListener("click"， () =gt； ...)： 为每个“全选”组成点击事件监听器。cb.closest("div")： 找到当前“全选”组成所在的div cb.closest("div").querySelectorAll(" [type=checkbox]")：选择当前分组容器中的所有组件。.forEach(c =gt； c.checked = cb.checked)：将所有组件的选中属性设置为与“全选”组件的选中属性相同，即选中或取消选中。

完整代码示例lt；!DOCTYPE htmlgt；lt；htmlgt；lt；headgt；lt；titlegt；JavaScript 分组和全选lt；/titlegt；lt；/headgt；lt；bodygt；lt；div id=quot；containerquot；gt；lt；/divgt；lt；scriptgt；const res = { List： [{"学校信息"：{RegId： 1，姓名： "SJ"}，家长信息：{Id：0，姓名："Abc"}，学生：{Id：1，姓名："Student1"}}， {"学校信息"：{RegId： 1，姓名： ""}，家长信息：{Id：0，姓名：""}，学生：{Id：5，姓名："Student6"}}， {"学校信息"：{RegId： 1，姓名： ""}，家长信息：{Id：0，姓名：""}，学生：{Id：1，姓名："Student3"}}， {"学校信息"：{RegId： 1，姓名： ""}， 家长信息：{Id：0，姓名：""}， 学生：{Id：5，姓名："Student5"}}， {"学校信息"：{RegId： 1，姓名： ""}， 家长信息：{Id：0，姓名：""}， 学生：{Id：1，姓名："Student4"}}， {"学校信息"：{RegId： 1，姓名： ""}， 家长信息：{Id：0，姓名：""}， 学生：{Id：7，姓名："Student9"}}， {"学校信息"：{RegId： 1，姓名： ""}， 家长信息：{Id：0，姓名：""}， 学生：{Id：7，姓名："Student11"}}]}； const result = res.List.reduce((a，c，i)=gt；{ (a[c.Student.Id]??=[]).push(c.Student.Name)； return a； }，{})； document.getElementById("container").innerHTML= Object.values(result).map(grp=gt； 'lt；divgt；lt；labelgt；选择所有学生 lt；input type="checkbox" class="group"gt；lt；/labelgt；lt；brgt；' grp.map(s=gt；`lt；labelgt；lt；input type="checkbox"gt；${s}lt；/labelgt；`).join("lt；brgt

；") 'lt；/divgt；').join("")； document.querySelectorAll(".group").forEach(cb=gt； cb.addEventListener("click"，()=gt；cb.closest("div").querySelectorAll(" [type=checkbox]").forEach(c=gt；c.checked=cb.checked))) lt；/scriptgt；lt；/bodygt；lt；/htmlgt；登录后复制总结

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

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

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