基于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 相关文章推荐
javascript Base类 包含基本的方法
Jul 22 Javascript
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
ES6对象操作实例详解
May 23 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
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
JavaScript 异步调用
2017/10/25 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
Vue常用的几个指令附完整案例
2018/11/06 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
详解Python中列表和元祖的使用方法
2015/04/25 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
python模拟表单提交登录图书馆
2018/04/27 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
django 消息框架 message使用详解
2019/07/22 Python
Python assert关键字原理及实例解析
2019/12/13 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
《北大荒的秋天》教学反思
2014/04/14 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
1000字打架检讨书
2014/11/03 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
保护动物的宣传语
2015/07/13 职场文书
三好学生竞选稿
2015/11/21 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python