jquery实现复选框的全选操作
来源:互联网 发布:python socket 长度 编辑:程序博客网 时间:2024/05/22 07:43
最近做了个需求,需要实现列表复选框的全选/取消全选操作,由于之前对这块不是很了解,所以从网上查了一些资料,虽然有各种实现方法,但没找到直接可以套用的。自己琢磨了下,把功能实现,整理如下。
实现细节如有可改进的地方,不吝赐教。
首先是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使用方法简单实例演示
0 0
- jquery实现复选框的全选操作
- Jquery实现复选框的全选
- 使用jQuery实现复选框的全选
- 复选框的全选操作
- jQuery复选框全选反选操作
- 用jquery实现复选框checkbox的全选
- jquery实现复选框的全选和反选
- jQuery实现复选框的全选 反选 全不选
- jQuery实现复选框的全选和反选:
- jquery实现checkbox复选框的全选反选
- jquery实现复选框的全选与反选
- Jquery 全选和全不选复选框的实现
- jquery实现复选框(checkbox)的全选与反选
- jQuery实现复选框的全选和反选
- jquery怎么实现全选复选框
- jQuery实现复选框全选功能
- JQuery复选框实现全选、单选
- jquery实现复选框全选和全不选
- Deep Learning(深度学习)学习笔记整理系列之(二)
- Codeforces698A Vacations
- 371. Sum of Two Integers
- RxJava入门第八、九问(二)
- html dl dt dd标签元素语法结构与使用
- jquery实现复选框的全选操作
- Java学习中位运算符底层运算过程
- H5游戏开发的架构总结(二) 服务器端
- SID是与系统运维
- 获取Http协议的请求行,请求头
- B - Bear and Three Balls(sort)
- MyBatis Generator产生的Example类
- 【Android】35、基本布局——RelativeLayout
- 添加鼠标事件侦听