jQuery/javascript实现全选全不选
<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/javascript实现全选全不选的更多相关文章
- jQuery实现Checkbox中项目开发全选全不选的使用
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法
如下图: <head> <title></title> <style type="text/css"> div { border: ...
- jquery之全选全不选
<input type="checkbox" onclick="selall(this)" />全选/全不选 <input type=&quo ...
- 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了
首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...
- jQuery实现全选、不选和反选功能
jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...
- jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）
原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...
- Java 多选框的全选、多选、反选（JQuery 实现）
jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...
- 在jquery中，全选/全不选的表示方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- solr入门命令
#####################shell命令############################# 导入文档: sh bin/post -c gettingstarted docs/i ...
- shell scripts
本文涉及的命令:test.[].shift.if.case.for.while.until.function.sh. 撰写 shell script 的良好习惯 在每个 script 的文件头处记录好 ...
- C# webBrowser(wpf/winform) 互调js
1.winform [PermissionSet(SecurityAction.Demand, Name = "FullTrust")] [ComVisible(true)] pu ...
- MySQL中如何插入反斜杠，反斜杠被吃掉，反斜杠转义
问题描述:mysql中带有反斜杠的内容入库后,发现反斜杠无故失踪了(俗话说被吃掉了) 例:插入insert into tb('url') values('absc\eeee'); 结果数据库里的内容是 ...
- NGUI 使用UITable(或UIGrid)注意事项
在ScrollView显示区域中,若Item数量不足以超出显示区域,有可能不是贴着ScrollView最边缘位置显示!这个时候可以按如下方法调整: 因为实际情况中,往ScrollView中添加Item ...
- python学习-异常处理
小技巧 isinstance(obj,foo) 检查是否obj是否是类 foo 的对象 class Foo(object): pass obj = Foo() isinstance(obj, Foo) ...
- 小甲鱼python视频第九讲（课后习题）
1.列表里可以存放什么东西? 可以存放任何的数据类型, list1 = ['我爱你','i love you',1314] print(list1) 2.向列表中添加元素 append(将参数作为一个 ...
- Windows CMD命令大全【转】
命令简介 cmd是command的缩写.即命令行 . 虽然随着计算机产业的发展,Windows 操作系统的应用越来越广泛,DOS 面临着被淘汰的命运,但是因为它运行安全.稳定,有的用户还在使用,所以一 ...
- python dict
###字典的基本结构 info = { "k1" : "v1", "k2" : "v2" } ###字典的valus可以 ...
- iOS 开发线程 gcd
基础知识: 下午9:09 一.基础概念 1.什么是GCD 全称是Grand Central Dispath 纯C语言编写,提供非常多且强大的函数,是目前推荐的多线程开发方法,NSOperation ...