基于JQuery实现CheckBox全选全不选


Posted in Javascript onJune 27, 2011

所以我就参照网上的例子试着自己写了一个,达到了自己想要的效果,其实这也是一个很简单的例子,其中有不足的地方还望大家能够给予指出。
下面把代码贴出来给大家看看

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="checkAll.aspx.cs" Inherits="checkAll" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Js/jquery-1.5.2.js" type="text/javascript"></script> 
<script src="Js/jquery-1.5.2.min.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function () { 
//全选或全不选 
$("#chkAll").click(function () {//当点击全选框时 
var flag = $("#chkAll").attr("checked");//判断全选按钮的状态 
$("[id$='Item']").each(function () {//查找每一个Id以Item结尾的checkbox 
$(this).attr("checked", flag);//选中或者取消选中 
}); 
}); 
//如果全部选中勾上全选框,全部选中状态时取消了其中一个则取消全选框的选中状态 
$("[id$='Item']").each(function () { 
$(this).click(function () { 
if ($("[id$='Item']:checked").length == $("[id$='Item']").length) { 
$("#chkAll").attr("checked", "checked"); 
} 
else $("#chkAll").removeAttr("checked"); 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<table> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chkAll" runat="server" Text="全选"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk1_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk2_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk3_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk4_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk5_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk6_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk7_Item" runat="server"/> 
</td> 
</tr> 
</table> 
</div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
Js面试算法详解
Apr 08 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 #Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 #Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 #Javascript
jquery一般方法介绍 入门参考
Jun 21 #Javascript
jquery操作select option 的代码小结
Jun 21 #Javascript
jquery随意添加移除html的实现代码
Jun 21 #Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 #Javascript
You might like
php 404错误页面实现代码
2009/06/22 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
Vue实现多标签选择器
2019/11/28 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
Python list和str互转的实现示例
2020/11/16 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
房屋改造计划书
2014/01/10 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
一年级语文教学反思
2014/02/13 职场文书
标准毕业生自荐信
2014/06/24 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL