基于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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
详解Node.js串行化流程控制
May 04 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 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面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
代码生成器 document.write()
2007/04/15 Javascript
JavaScript中的Location地址对象
2008/01/16 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python简单操作excle的方法
2018/09/12 Python
对Django外键关系的描述
2019/07/26 Python
pandas的相关系数与协方差实例
2019/12/27 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
千元咖啡店的创业计划书范文
2013/12/29 职场文书
材料会计岗位职责
2014/03/06 职场文书
咖啡店创业计划书
2014/08/15 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
吴仁宝观后感
2015/06/09 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
争做文明公民倡议书
2019/06/24 职场文书
Oracle使用别名的好处
2022/04/19 Oracle