jquery 实现复选框的全选操作实例代码

jquery 实现复选框的全选操作实例代码

最近做了个需求,需要实现列表复选框的全选/取消全选操作,由于之前对这块不是很了解,所以从网上查了一些资料,虽然有各种实现方法,但没找到直接可以套用的。自己琢磨了下,把功能实现,整理如下。

实现细节如有可改进的地方,不吝赐教。

首先是html部分的代码,这里有一个表格,表格里面有一些选项:

rush:xhtml;">
Box" name="group" value="1"/>Box" name="group" value="2"/>Box" name="group" value="3"/> 全选Box" id="all"/>

接下来是jquery:

rush:js;">

当全选框被点击时,判断选中状态,如果是选中,则为所有选项的复选框设置选中属性;如果是取消选中,则为所有选项的复选框取消选中属性

同时,为每个选项复选框添加判断,当所有的选项复选框都选中时,全选框自动选中;否则,全选框取消选中。这里通过计数来比较(选项的数量和选中的选项数量),通过each方法来进行遍历。

最后,在显示时执行一次,这是确保如果初始状态就是所有选项都选中的状态,要保证全选框也是选中的状态。

参考:Box使用方法简单实例演示

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...