jquery实现复选框全选 jq实现复选框的全选与不选

本教程详细介绍了如何使用 jQuery 实现网页中多个独立区域内部组件的“全选/全不选”功能。通过为每个区域设置一个“全选”对话框，并监听其及区域内部其他子子的事件点击，实现父级之间的状态联动。文章提供了的 HTML 结构示例和完整的 jQuery

在网页开发中，我们经常会遇到需要管理一组分组，并提供一个“全选”功能来方便用户操作的场景。当上页面存在多个独立的分组时，例如在不同的组的交互或模块中，每个都需要有自己的“全选”功能，并且组与组之间互不影响。本教程将指导您如何使用jquery实现这种分区的分组联动控制。 HTML 结构准备

为了使 jQuery 能够有效地识别和操作不同区域的组件，我们需要对 HTML 结构进行一些规定。关键在于为每个独立的组件添加一个公共的级父类，并为每个组的“全选”组件添加一个特定的类。

以下是推荐的 HTML 结构示例：lt；div class=quot；actionsquot；id=quot；actionsquot；title=quot；Actionsquot；gt；lt；!-- 第一个模块组 --gt； lt；div class=quot；myDivquot；gt； lt；divgt；lt；input type=quot；checkboxquot； name=quot；actionquot；class=quot；selectAllquot； value=quot；0quot； /gt；选择全部lt；/divgt；lt；br /gt； lt；divgt；lt；输入类型=quot；checkboxquot； name=quot；actionquot；value=quot；1quot； /gt； 第 1lt 项；/divgt；lt；br /gt； lt；divgt；lt；输入类型=quot；checkboxquot； name=quot；actionquot；value=quot；2quot； /gt； Item 2lt；/divgt；lt；br /gt； lt；divgt；lt；输入类型=“复选框”；名称=“操作”；值=“3”；/gt；项目3lt；/divgt；lt；br /gt；lt；/divgt；lt；!-- 第二个组 --gt；lt；div class=“myDiv”；gt；lt；divgt；lt；输入类型=“复选框”；名称=“操作”；class=“selectAll”；值=“26”；/gt；全选lt；/divgt；lt；br /gt；lt；divgt；lt；输入类型=“复选框”；名称=“操作”；值=“27”；/gt；项目4lt；/divgt；lt；br /gt；lt；divgt；lt；输入类型=“复选框”；名称=“操作”；值=“28”；/gt；项目5lt；/divgt；lt；br /gt； lt；divgt；lt；输入类型=“；复选框”；名称=“；操作”；值=“；29”；/gt； 第6项lt；/divgt；lt；br /gt； lt；divgt；lt；输入类型=“；复选框”；名称=“；操作”；值=“；30”；/gt； 第7项lt；/divgt；lt；br /gt； lt；divgt；lt；输入类型

pe=quot；checkboxquot； name=quot；actionquot； value=quot；31quot； /gt； Item 8lt；/divgt； lt；/divgt；lt；/divgt；登录复制

结构说明：div.myDiv：是每个独立包装组的容器。通过这个类，我们可以轻松地在 jQuery 中定位到特定的组。input.selectAll：是每个组内的“全选”模块。 input[type="checkbox"]：这些是组内的普通模板。2. 核心 jQuery 逻辑

我们将通过监听组件的点击事件来实现联动效果。主要分为两个部分逻辑：处理“全选”组件的点击事件，以及处理单个组件的点击事件。

在开始编写 JavaScript 代码之前，请确保您的中已引入 jQuery 库：lt；script src=quot；https：//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.jsquot；gt；lt；/scriptgt；登录后复制2.1处理“全选”组成的点击事件

当用户点击某个“全选”组成时，我们需要根据其当前状态来同步该组内所有其他部分的状态。$('.selectAll').on('click'， function() { let isSelected = $(this).is('：checked')； // 获取“全选”的当前选中状态 // 找到当前“全选”所在的父级 .myDiv 容器 // 然后在该容器内查找所有类型为 checkbox 的 input 元素 $(this).parents('.myDiv').find('input[type=quot；checkboxquot；]').prop('checked'， isSelected)；})；登录后复制

代码解析：$('.selectAll').on('click'， function(){...})： 为所有标记的 selectAll $(this).is('：checked')：获取当前被点击的“全选”的勾选状态（true 或 false）。$(this).parents('.myDiv')：从当前点击的元素向上查找，直到找到最近的带有 myDiv 类的父元素。这确保了我们只操作当前组内的要点。find('input[type="checkbox"]')：在找到的 myDiv容器内部，查找所有 type 为 checkbox 的 input 元素，包括“全选”组件本身。.prop('checked'， isSelected)：使用 jQuery 的 prop() 方法设置所有找到的组件的选中属性，配制与“全选”组件的状态保持一致。2.2 处理组件内所有普通组件的点击事件

当用户点击组内的任何一个普通组件时，我们需要根据组内所有普通组件的选中情况，来自动更新“全选”组件的状态。

$('input：not(quot；.selectAllquot；)').on('click'， function() { let $parentDiv = $(this).parents('.myDiv')； // 获取当前组内所有非“全选”的普通表单 let $individualCheckboxes = $parentDiv.find('input：not(quot；.selectAllquot；)')； // 获取当前组内所有非“全选”的普通表单获取当前组内所有非“全选”且已被选中的普通表单 let $checkedIndividualCheckboxes = $parentDiv.find('input：not(quot；.selectAllquot；)：checked')； // 获取当前组内所有非“全选”且已被选中的普通表单 let $selectAllCheckbox = $parentDiv.find('.selectAll')； // 检查所有普通表单都是否被选中 if ($individualCheckboxes.length === $checkedIndividualCheckboxes.length) { // 如果所有普通表单都勾选，则“全选”表单也应该勾选 $selectAllCheckbox.prop('checked'， true)； } else { // 否则，“全选”表单也应该取消勾选 $selectAllCheckbox.prop('checked'， false)； }})；登录后复制

代码解析：$('input：not(".selectAll")').on('click'， function(){...})： 为所有不是 selectAll $parentDiv.find('input：not(".selectAll")')： 查找当前组内所有非“全选”的模块。$parentDiv.find('input：not(".selectAll")：checked')：查找当前组内所有非“全选”且选中选中状态的表单。通过比较长度 属性，判断所有普通表单是否都被选中。$selectAllCheckbox.prop('checked'， true/false)：根据判断结果，更新当前组的“全选”表单的选中状态。 3. 完整示例代码

将上述HTML结构和jQuery逻辑集成在一起，即可实现所需的功能。

jQuery 分区域组成联动控制 lt；script src=quot；https：//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.jsquot；gt；lt；/scriptgt； .myDiv { border： 1pxsolid #ccc； padding： 15px； margin-bottom： 20px； background-color： #f9f9f9； } .myDiv div { margin-bottom： 5px； } .selectAll { font-weight： 粗体； color： #0056b3； } 全选（第 1 组） Item 1.1 Item 1.2 Item 1.3 全选（第 2 组） Item 2.1 Item 2.2 Item 2.3 Item 2.4 Item 2.5 lt；scriptgt；$(document).ready(function() { //处理“全选”组成部分的点击事件$('.selectAll').on('click'， function() { let isSelected = $(this).is('：checked')； $(this).parents('.myDiv').find('input[type=quot；checkboxquot；]').prop('checked'， isSelected)； })； // 处理单个相同的点击事件 $('input：not(quot；.selectAllquot；)').on('click'， function() { let $parentDiv = $(this).parents('.myDiv')； let $individualCheckboxes = $parentDiv.find('input：not(quot；.selectAllquot；)')； let $checkedIndividualCheckboxes = $parentDiv.find('input：not(quot；.selectAllquot；)：checked')； let $selectAllCheckbox = $parentDiv.find('.selectAll')； if ($individualCheckboxes.length === $checkedIndividualCheckboxes.length) { $selectAllCheckbox.prop('检查

ed'， true)； } else { $selectAllCheckbox.prop('checked'， false)； } })；})；lt；/scriptgt；登录后复制4. 注意事项与最佳实践 jQuery 库引用：确保在您的 JavaScript 代码中，jQuery 库已经被正确引入。通常建议在标签结束前引入，或者在中使用 defer 属性。类名规定：保持 myDiv 和 selectAll 等类名的一致性，它们是 jQuery 选择器能够准确事件工作的基础。性能考量：对于包含大量外部的复杂页面之前，虽然上述方法在大多数情况下表现良好，但如果遇到性能问题，可以考虑使用可能的情况($(document).on('click'， '.selectAll'， function(){...}))，可以减少事件监听器的数量。初始化状态：如果页面加载时某些组件组可能已经有部分或全部选中状态，您可能需要在 $(document).ready() 中添加额外的逻辑来初始化“全选”组件的状态。例如，获取每个 .myDiv 并根据其内部组件的初始状态来设置 selectAll总结。总结

通过本教程，您学会了如何利用 jQuery 的事件监听和 DOM 遍历功能，实现分区区域的“全选/全不选”联动控制。这种方法不仅结构清晰、易于理解，而且能够地提升用户在处理多组表单数据时的操作体验。掌握这种模式，将有助于您构建文章交互性和用户交互性的Web应用。

以上基于jQuery的分区域构成联动控制教程的内容详细，更多请关注乐哥常识网其他相关！