微信小程序系列产品_jquery 完成复选框的全选操作

摘要: jquery 完成勾选框的全选实际操作案例编码 文章投稿:lqh 本文关键详细介绍了jquery 完成勾选框的全选实际操作案例编码的有关材料,必须的朋友能够参照下jquery 完成勾选框的全选实...

jquery 实现复选框的全选操作实例代码     投稿:lqh   这篇文章主要介绍了jquery 实现复选框的全选操作实例代码的相关资料,需要的朋友可以参考下

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方法来进行遍历。

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

参考:




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503