jQuery全选技巧：排除全选框，tbody input标签操作实现

本文主要介绍了如何使用JavaScript和jQuery来实现表格中复选框的全选/取消全选功能。以下是详细的知识点： 1. **HTML结构与元素定位**： 文章首先提到技巧是在`<tbody>`元素下寻找`<input>`标签，这是因为这些通常是用于复选框操作的，尤其是表格形式的选择列表。这表明了作者关注的是如何处理表格内的交互逻辑。 2. **获取选框数组**： `var all = my$("j_tb").getElementsByTagName("input");` 这段代码展示了如何通过jQuery选择器`my$("j_tb")`获取到表格中所有`<input>`标签，然后将其存储在一个数组中，以便后续操作。 3. **全选功能实现**： - **实现1：点击全选所有子选框**： 当用户点击全选框`j_cbAll`时，这段代码检查`j_cbAll`的`checked`属性。如果为真，则遍历`all`数组，将所有子选框的`checked`属性设置为`true`。反之，将它们全部设置为`false`，实现取消全选。 - **实现2：子选框选择影响全选框**： 这部分代码更为细致，当子选框被点击时，它会动态地执行以下操作： - 创建一个空数组`arr`来存储被选中的子选框。 - 当用户点击子选框时，遍历`all`数组，如果`all[i].checked`为`true`，则将该选框添加到`arr`中。 - 检查`arr`的长度，如果等于`all`的长度，说明所有子选框都被选中，设置`j_cbAll`为选中状态；否则，将其设置为未选中状态。 4. **注意事项**： 作者提醒，在获取子选框时，不需要包含全选框的计数，因为全选框不在`all`数组中。这是对性能优化的一种考虑，避免不必要的计算。 5. **jQuery依赖**： 文档提到的`<script src="jquery-1.12.4.js"></script>`表明在使用这两种实现方法时，需要确保页面已经加载了jQuery库，以便使用`my$("j_tb")`这样的选择器。 总结起来，这篇文章提供了两种不同的方式来实现表格复选框的全选/取消全选功能，利用了JavaScript和jQuery的强大功能，特别是动态数组管理和事件监听。通过这个实例，读者可以更好地理解如何在网页中处理这种常见的用户交互场景。