jquery 实现复选框的全选操作实例代码
网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要介绍了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方法来进行遍历。
,在显示时执行一次,这是确保如果初始状态就是所有选项都选中的状态,要保证全选框也是选中的状态。
参考
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程