首页 > 编程 > JavaScript > 正文

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

2019-11-19 17:47:24
字体:
来源:转载
供稿:网友

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

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

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

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

<div id="list">   <table>     <tr><td>选项1<input type="checkbox" name="group" value="1"/></tr>     <tr><td>选项2<input type="checkbox" name="group" value="2"/></tr>     <tr><td>选项3<input type="checkbox" name="group" value="3"/></tr>   </table> </div>全选<input type="checkbox" id="all"/>   

接下来是jquery:

<script> $(document).ready(function () {   //全选或全不选   $("#all").click(function () {     if (this.checked) {       $("#list :checkbox").attr("checked", true);     } else {       $("#list :checkbox").attr("checked", false);     }   });   //设置全选复选框   $("#list :checkbox").click(function () {     allchk();   });   function allchk() {     var chknum = $("#list :checkbox").size();//选项总个数     var chk = 0;     $("#list :checkbox").each(function () {       if ($(this).attr("checked")) {         chk++;       }     });     if (chknum == chk) {//全选       $("#all").attr("checked", true);     } else {//不全选       $("#all").attr("checked", false);     }   }   //显示时执行一次   allchk(); }); </script> 

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

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

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

参考:jquery中checkbox使用方法简单实例演示

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表