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/ ...
随机推荐
- 安卓手机开机开启指定Activity
1.布局 默认helloworld布局 2.class BootCompleteReceiver package lpc.com.project522; import android.content. ...
- EditText的一些属性及用法
EditText的一些属性及用法设置当EditText获得焦点时把文本框的内容全选中android:selectAllOnFocus="true"设置某个EditText默认获得焦 ...
- protocol buffers的使用示例[z]
[http://blog.csdn.net/zhu_xun/article/details/19397081] protocol buffers的使用示例 如果不了解protocol buffers, ...
- C/C++语言的一些精简归纳
前言:本想直接写个关于OC语言,但觉得还是要说下C先. 先语言特性 C是面向过程的,没有类和对象概念,也就没有什么封装(这个?).继承.多态等特性. 而且是是中级语言,其编译过程包括:预编译(incl ...
- BIEE 11g 安装
1.安装oracle 创建字符集为AL32UTF8的实力MERIT sys密码merit 创建biee用户 create tablespace biee datafile 'D:\ORADATA\M ...
- css小技巧之去掉蓝色底块的方法
-moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE1 ...
- POJ1222_EXTENDED LIGHTS OUT
给出5*6的位置,每个位置有一个灯,一开始每个灯有各自的状态,你可以选定一些位置使得所有与这个位置相邻以及位置本身的灯都取反. 输出合法方案. 本来是找高斯消元找到这个题目的,可是....我发现可以直 ...
- hdoj 2680 choose the best route
Problem Description One day , Kiki wants to visit one of her friends. As she is liable to carsicknes ...
- Android AsyncTask完全解析，带你从源码的角度彻底理解
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/11711405 我们都知道,Android UI是线程不安全的,如果想要在子线程里进 ...
- JS原生方法实现瀑布流布局
html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec ...