基于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 相关文章推荐
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
详解vue中axios的封装
Jul 18 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
详解vue中的computed的this指向问题
Dec 05 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP中的一些常用函数收集
2015/05/26 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
vue2组件之select2调用的示例代码
2017/10/12 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
Promise扫盲贴
2019/06/24 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
Python常用小技巧总结
2015/06/01 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
python日期相关操作实例小结
2019/06/24 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
详解Python 最短匹配模式
2020/07/29 Python
Python-split()函数实例用法讲解
2020/12/18 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
《将心比心》教学反思
2014/04/08 职场文书
推广活动策划方案
2014/08/23 职场文书
田径运动会通讯稿
2014/09/13 职场文书
搬迁通知
2015/04/20 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
js前端图片加载异常兜底方案
2022/06/21 Javascript