jQuery实现Checkbox中项目开发全选全不选的使用
<html>
<head>
<meta charset="utf-8">
<title>Checkbox的练习</title>
<style type="text/css">
*{margin:0px;padding:0px;}
table{width:100%;text-align:center;}
</style> <script src="jquery.js"></script>
<script language="javascript">
$(function(){
//给全选的复选框添加事件
$("#all").click(function(){
// this 全选的复选框
var userids=this.checked;
//获取name=box的复选框 遍历输出复选框
$("input[name=box]").each(function(){
this.checked=userids;
});
}); //给name=box的复选框绑定单击事件
$("input[name=box]").click(function(){
//获取选中复选框长度
var length=$("input[name=box]:checked").length;
//未选中的长度
var len=$("input[name=box]").length;
if(length==len){
$("#all").get(0).checked=true;
}else{
$("#all").get(0).checked=false;
}
});
}); </script>
</head>
<body>
<div>
<form action="" method="post">
<table border="1px">
<tr>
<th>
<input type="Checkbox" id="all"/>全选
</th>
<th>用户编号</th>
<th>用户账号</th>
<th>用户姓名</th>
<th>用户性别</th>
<th>用户年龄</th>
<th>家庭住址</th>
</tr>
<tr>
<td><input type="Checkbox" name="box" value="10010"/></td>
<td>10010</td>
<td>root</td>
<td>小别</td>
<td>男</td>
<td>22</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" value="10011"/></td>
<td>10011</td>
<td>root</td>
<td>小李</td>
<td>男</td>
<td>23</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" value="10012"/></td>
<td>10012</td>
<td>root</td>
<td>小赵</td>
<td>男</td>
<td>21</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" value="10013" /></td>
<td>10013</td>
<td>root</td>
<td>小周</td>
<td>男</td>
<td>25</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" value="10014" /></td>
<td>10014</td>
<td>root</td>
<td>小吴</td>
<td>男</td>
<td>20</td>
<td>河南</td>
</tr>
</table> </form>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox的练习</title>
<style type="text/css">
*{margin:0px;padding:0px;}
table{width:100%;text-align:center;} </style>
<script language="javascript">
function checkAll(obj){
//alert(obj.checked);
//获取name=box的复选框
var userids=document.getElementsByName("box");
//alert(userids.length);
for(var i=0;i<userids.length;i++){
userids[i].checked=obj.checked;
}
} function selectAll(){
//获取name=box的复选框
var userids=document.getElementsByName("box");
var count=0;
//遍历所有的复选框
for(var i=0;i<userids.length;i++){
if(userids[i].checked){
count++;
}
}
//选中复选框的个数==获取复选框的个数
if(count==userids.length){
//设置id为all复选框选中
document.getElementById("all").checked=true;
}else{
//设置id为all复选框不选中
document.getElementById("all").checked=false;
} }
</script>
</head>
<body>
<div>
<form action="" method="post">
<table border="1px">
<tr>
<th>
<input type="Checkbox" onclick="checkAll(this)" id="all"/>全选
</th>
<th>用户编号</th>
<th>用户账号</th>
<th>用户姓名</th>
<th>用户性别</th>
<th>用户年龄</th>
<th>家庭住址</th>
</tr>
<tr>
<td><input type="Checkbox" name="box" onclick="selectAll()" value="10010"/></td>
<td>10010</td>
<td>root</td>
<td>小别</td>
<td>男</td>
<td>22</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" onclick="selectAll()" value="10011"/></td>
<td>10011</td>
<td>root</td>
<td>小李</td>
<td>男</td>
<td>23</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" onclick="selectAll()" value="10012"/></td>
<td>10012</td>
<td>root</td>
<td>小赵</td>
<td>男</td>
<td>21</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" onclick="selectAll()" value="10013" /></td>
<td>10013</td>
<td>root</td>
<td>小周</td>
<td>男</td>
<td>25</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" onclick="selectAll()" value="10014" /></td>
<td>10014</td>
<td>root</td>
<td>小吴</td>
<td>男</td>
<td>20</td>
<td>河南</td>
</tr>
</table> </form>
</div>
</body>
</html>
jQuery实现Checkbox中项目开发全选全不选的使用的更多相关文章
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之三 角色管理源码分享 在上两篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块（菜单）管理源码分享
http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享 在上四篇文章 ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享
http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享 在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享 ...
- 【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享 在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的U ...
- 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...
- 使用Jquery+EasyUI 进行框架项目开发案例解说之二---用户管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之二 用户管理源代码分享 在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享> ...
- 使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享
使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享 使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享 在开始讲解之前,我们先来看一下什 ...
- （转）使用Jquery+EasyUI 进行框架项目开发案例讲解之四---组织机构管理源码分享
原文地址:http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码 ...
随机推荐
- Abstract Factory（抽象工厂）模式
1.意图 提供一个创建一系列相关或相互依赖对象的接口,而无需制定它们具体的类. 2.适用性 一个系统要独立于它的产品创建.组合和表示时. 一个系统要由多个产品系列中的一个来配置时. 当你强调一系列相关 ...
- texstudio on ubuntu 12.04
从官网下载针对12.04的版本的texstudio: http://texstudio.sourceforge.net/ 安装deb包:sudo dpkg -i texstudio_xx.deb 运行 ...
- Two-Phase Commit (两阶段提交)
1. 流程 1) Coordinator (协调者) 广播 VOTE-REQ 给所有 Participant (参与者) 2) Coordinator 等待 Participant 的结果 3) Pa ...
- Python学习笔记- Python threading模块
Python threading模块 直接调用 # !/usr/bin/env python # -*- coding:utf-8 -*- import threading import time d ...
- 线程学习笔记 等待句柄和线程池（摘自https://blog.gkarch.com/threading/part2.html#manualresetevent）
//如果你的应用有很多线程,这些线程大部分时间都在阻塞,那么可以通过调用ThreadPool.RegisterWaitForSingleObject来减少资源消耗.这个方法接受一个委托,它会在向等待句 ...
- webview 实现滑动前进后退功能
实现该功能大家一定会想到在OnTouchListener里实现 webview.setOnTouchListener(new OnTouchListener() { @Override public ...
- java中this用法总结
1,当局部变量和成员变量重名的时候,在方法中使用this表示成员变量以示区分. class Demo{ String str = "这是成员变量"; void fun(String ...
- centos的安装，网络的调试
因业务需要,我今天尝试为公司服务器安装centos,选择的版本是6.7 第一步,下载:http://isoredirect.centos.org/centos/6/isos/x86_64/
- DM9000网卡驱动接受数据从中断方式改成NAPI方式小记
平台是最最经典的s3c2440了,说了要做这件事情很久了,就是改几行代码,一直没有做.前几天逼了自己一下,终于给做了,拖延症患者伤不起. 以下是需要读者对napi机制有所熟悉: step1:在boar ...
- mvc-servlet---ServletConfig与ServletContext对象详解（转载）
ServletConfig与ServletContext对象详解 一.ServletConfig对象 在Servlet的配置文件中,可以使用一个或多个<init-param>标签为s ...