checkbox 的全选与全不选

只需要调用 cekAll.check();方法，这个方法接收两个参数：

参数一: 全选按钮的 id 以字符串的形式写
参数二: 其他 checkbox 的 name 值 也是以字符串的形式写

使用很简单 : 复制 js 代码到你的 js 文件的任何地方，只需要在HTML文档加载完以后调用 cekAll.check();传入参数即可 什么点击事件，什么获取对象，统统不用写，

装点：不管你的 checkbox 是写到页面上的还是动态读取的，都不需要加事件。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script>
  7.     var cekAll = {
  8.         'num':0,
  9.         check:function(part,chid){
  10.             var parent = document.getElementById(part);
  11.             var child = document.getElementsByName(chid);
  12.             parent.onclick = function(){
  13.                 if(parent.checked != true){
  14.                     for(var j = 0;j<child.length;j++){
  15.                         child[j].checked = false;
  16.                         cekAll.num = 0;
  17.                     };
  18.                 }else{
  19.                     for(var i=0;i< child.length;i++){
  20.                         if(parent.checked == true){
  21.                             child[i].checked = true;
  22.                             cekAll.num = child.length;
  23.                         };
  24.                     };
  25.                 };
  26.             };
  27.             cekAll.childClick(part,chid);
  28.         },
  29.         childClick:function(one,two){
  30.             var one1 = document.getElementById(one);
  31.             var two1 = document.getElementsByName(two);
  32.             for(var j = 0;j< two1.length;j++){
  33.                 two1[j].onclick = (function(){
  34.                     return function(){
  35.                             if(this.checked == false){
  36.                                 one1.checked = false;
  37.                                 cekAll.num--;
  38.                             }else{
  39.                                 cekAll.num ++;
  40.                                 if(cekAll.num == two1.length){
  41.                                     one1.checked = true;
  42.                                 };
  43.                             };
  44.                         };
  45.                 })();
  46.             };
  47.         }
  48.     };
  49.     </script>
  50. </head>
  51. <body>
  52.     <div>
  53.         <input type="checkbox" id="quanxuan"/>全选<br/>
  54.     </div>
  55. <script>
  56.     // 动态添加的 checkbox 跟写到页面上是一样的
  57.     var div = document.getElementsByTagName('div')[0];
  58.     var arr = ['吃饭','睡觉','打豆豆'];
  59.         for(i in arr){
  60.             var str = '<input type="checkbox" name="che1">'+arr[i]+'';
  61.             div.innerHTML += str;
  62.         }
  63.     // -- 静态写到页面上的、动态添加的，调用 cekAll.check(); 方法的书写格式都一样
  64.     cekAll.check('quanxuan','che1');
  65.     </script>
  66. </body>
  67. </html>

checkbox 的全选与全不选的更多相关文章

  1. CheckBox复选框全选以及获取值

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. jquery的checkbox 全选和全不选

    今天写了一个checkbox的全选和全不选的功能: var check_all=function(){ if(this.checked){ //alert($(".adv_check_num ...

  3. jQuery checkbox 所有 全选、全不选、是否选中等

    下面是网络收集: jquery判断checked的三种方法:.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或fals ...

  4. jQuery对复选框（checkbox)的全选，全不选，反选等的操作

    效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...

  5. jQuery实现CheckBox全选、全不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次

    jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...

  7. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  8. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  9. 关于在repeater中的checkbox实行多选和全选

    今天项目中用到这一块,是一个b2b商城,业务是别人给客户留言后,客户从会员中心的留言管理中查看,用checkbox实行多选和全选后进行批量审核 首先在checkbox后加个hidden,作用见代码: ...

随机推荐

  1. osg osgDB::Options noTexturesInIVEFile ForceReadingImage dds_flip

    osgDB::writeNodeFile(node, path, new osgDB::Options("noTexturesInIVEFile")); noTexturesInI ...

  2. WIN7 64位系统下，右下角的声音和电源图标不见的解决办法

    近日,电脑突然出现任务栏右下角的声音和电源图标消失不见的问题,重启仍旧没有修复,后来找到了解决办法 解决办法: 1.Ctrl+Shift+Esc键调出windows资源管理器. 2.找到进程中的exp ...

  3. 关于Cookie和Session的优缺点

    关于Cookie和Session的优缺点 具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案. Cookie的优缺点:优点:极高的扩展性和可用 ...

  4. shell之数值运算

    Shell中声明变量默认是字符串, 要参与数值运算,可使用下面方式,简单,表示以数值方式.

  5. 检查C++内存泄露

    #ifdef _DEBUG #define DEBUG_CLIENTBLOCK new( _CLIENT_BLOCK, __FILE__, __LINE__) #else #define DEBUG_ ...

  6. Swift - enumerateObjectsUsingBlock的用法

    enumerateobjectsusingblock:不是Array的方法在NSArray使用.如果你想使用它,你需要一个实例NSArray而不是Array. import Foundation va ...

  7. Stuts2的"struts.devMode"设置成true后，不起作用，仍需要重启tomcat

    在项目的struts.xml加入了常量配置:<constant name="struts.devMode" value="true" />后,重启服 ...

  8. ASP.NET Web Api 使用CacheCow和ETag缓存资源（转载）

    转载地址:http://www.cnblogs.com/fzrain/p/3618887.html 前言 本文将使用一个开源框架CacheCow来实现针对Http请求资源缓存,本文主要介绍服务器端的缓 ...

  9. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  10. scrollTop和scrollLeft的兼容解决万全方法

    1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...