checkbox 的全选与全不选
checkbox 的全选与全不选
只需要调用 cekAll.check();方法,这个方法接收两个参数:
参数一: 全选按钮的 id 以字符串的形式写
参数二: 其他 checkbox 的 name 值 也是以字符串的形式写
使用很简单 : 复制 js 代码到你的 js 文件的任何地方,只需要在HTML文档加载完以后调用 cekAll.check();传入参数即可 什么点击事件,什么获取对象,统统不用写,
装点:不管你的 checkbox 是写到页面上的还是动态读取的,都不需要加事件。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var cekAll = {
'num':0,
check:function(part,chid){
var parent = document.getElementById(part);
var child = document.getElementsByName(chid);
parent.onclick = function(){
if(parent.checked != true){
for(var j = 0;j<child.length;j++){
child[j].checked = false;
cekAll.num = 0;
};
}else{
for(var i=0;i< child.length;i++){
if(parent.checked == true){
child[i].checked = true;
cekAll.num = child.length;
};
};
};
};
cekAll.childClick(part,chid);
},
childClick:function(one,two){
var one1 = document.getElementById(one);
var two1 = document.getElementsByName(two);
for(var j = 0;j< two1.length;j++){
two1[j].onclick = (function(){
return function(){
if(this.checked == false){
one1.checked = false;
cekAll.num--;
}else{
cekAll.num ++;
if(cekAll.num == two1.length){
one1.checked = true;
};
};
};
})();
};
}
};
</script>
</head>
<body>
<div>
<input type="checkbox" id="quanxuan"/>全选<br/>
</div>
<script>
// 动态添加的 checkbox 跟写到页面上是一样的
var div = document.getElementsByTagName('div')[0];
var arr = ['吃饭','睡觉','打豆豆'];
for(i in arr){
var str = '<input type="checkbox" name="che1">'+arr[i]+'';
div.innerHTML += str;
}
// -- 静态写到页面上的、动态添加的,调用 cekAll.check(); 方法的书写格式都一样
cekAll.check('quanxuan','che1');
</script>
</body>
</html>
checkbox 的全选与全不选的更多相关文章
- CheckBox复选框全选以及获取值
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- jquery的checkbox 全选和全不选
今天写了一个checkbox的全选和全不选的功能: var check_all=function(){ if(this.checked){ //alert($(".adv_check_num ...
- jQuery checkbox 所有 全选、全不选、是否选中等
下面是网络收集: jquery判断checked的三种方法:.attr('checked): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或fals ...
- jQuery对复选框(checkbox)的全选,全不选,反选等的操作
效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...
- jQuery实现CheckBox全选、全不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery checkbox全选,全不选,反选方法,jquery checkbox全选只能操作一次
jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...
- Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例
<input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...
- checkbox复选框全选批量删除
多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...
- 关于在repeater中的checkbox实行多选和全选
今天项目中用到这一块,是一个b2b商城,业务是别人给客户留言后,客户从会员中心的留言管理中查看,用checkbox实行多选和全选后进行批量审核 首先在checkbox后加个hidden,作用见代码: ...
随机推荐
- PHP如何随机获取一个二维数组中的一个值
获取一个数组: $awardid_list=pdo_fetchall('select id from '.tablename($this->table_award)); 这是微擎的写法哈,意思就 ...
- Eclipse 安装SVN
地址:http://wenku.baidu.com/link?url=ntQy2-1CjlNyUpO0-4uhROrc9jCo12Yifh7MkPULmY_dCybl6SEH99SxYxEbZQEiW ...
- instanceof、 isinstance 与 isAssignableFrom的区别
instanceof运算符 只被用于对象引用变量,检查左边的被测试对象 是不是 右边类或接口的 实例化.如果被测对象是null值,则测试结果总是false. 形象地:自身实例或子类实例 instanc ...
- Android之IPC机制
Android IPC简介 任何一个操作系统都需要有相应的IPC机制,Linux上可以通过命名通道.共享内存.信号量等来进行进程间通信.Android系统不仅可以使用了Binder机制来实现IPC,还 ...
- Linux安装xwindow图形界面
在我们安装Linux系统时,刚开始的时候可能没有安装图形界面的需要,但在使用过程中却有可能产生这种需求.那么这种情况下,我们需不需要重新安装Linux系统来安装桌面呢?答案是不需要.下面我将交大家在已 ...
- mysql里表以及列的增删改查
在一个表里插入数据(增) insert into 表名 (需要插入的列名如 id,name,age)values (1,'张三',20), (2,'李四',30): 查询表内容(查 ...
- smarty汇总
Smarty:模板技术 实现功能:前后分离. 原理:主要通过Smarty核心类实现,调用display方法,将模板文件读取,用正则进行替换,替换完保存到临时文 件,将临时文件加载到当前页面. 配置文件 ...
- Java -- 找不到或无法加载主类
原文:http://wenku.baidu.com/link?url=5nS1GEaePn-hmtAg6xXdJvtt9Z89JQsakhqSv8fambaJY2t9nKPtf3hXFpjW-BtD9 ...
- Clr Via C#读书笔记----基元线程同步构造
线程文章:http://www.cnblogs.com/edisonchou/p/4848131.html 重点在于多个线程同时访问,保持线程的同步. 线程同步的问题: 1,线程同步比较繁琐,而且容易 ...
- windows常用命令
打开"运行"对话框(Win+R),输入cmd,打开控制台命令窗口... 也可以通过cmd /c 命令 和 cmd /k 命令的方式来直接运行命令 注:/c表示执行完命令后关闭cmd ...