jQuery全选和取消全选插件及代码分析

在前端开发中，经常会出现这种情况：单击某一复选框实现某一行或某一列的复选框在被选中或不被选中的状态间切换。在没有jQuery之前，我们需要一大段js代码来实现这种效果。有了jQuery这个强大的库之后，我们可以很方便的开发实现这种效果的jQuery插件。我将它命名为jQuery.fn.selectAll插件。

在构建我们的插件之前，我们想考虑一下其功能需求：

所有复选框的状态都随全选复选框的状态而发生变化；
如果所有复选框都被选中时，全选复选框立即处于选中状态；
如果当前选中复选框的数量小于复选框的总数时，全选复选框立即处于非选中状态；
所以，在那些处于全选复选框控制之下的复选框全被点击时，就需要时刻判断当前被选中复选框的个数，从而决定全选复选框是否被选中。

该插件有一到两个参数：

range 定义所有需要进行操作的上下文背景；
func 一个处理函数，参数为当前选中的复选框的数量。
即：

接下来要做的是：给所有复选框绑定click事件。在绑定事件之前，先得到除全选复选框之外的所有复选框以及数量。

对于全选复选框，绑定事件如下：

对于其他复选框，事件如下：

完整代码如下：

查看代码演示：http://www.veryhuo.com/a/view/12521.html

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!