在表格或者列表中经常会遇到要全选或者反选等交互，今天总结了一下代码，保留着以后直接拿来用

原理：

1. 全选：当全选checkbox被点击（不管点击之前是什么状态）后，获取其checked状态。然后对列表进行循环检测，此时可以将所有的（无论之前什么状态），设为选中，也可对未选中的进行选中。

2. 反选：当反选checkbox被点击（不管点击之前是什么装填）后，获取其其状态值，对列表进行循环检测，将被检测的元素的checked状态反向处理，即可。

3. 列表全选或者不全选：当列表中的任意一个checkbox被点击，侧应该对列表中的所有checkbox进行循环检测，如果此时全部选中，则应将全选checked选中，如果有至少一个没被选中，则应将全选checkbox取消选中。

代码实现：

为了测试代码的正确性，建立如下的HTML文档：

<!DOCTYPE html>

<html>

<head>

<title>checkbox测试</title>

</head>

<body>

<table>

<tr>

<td><input type="checkbox" id="allChecked"><span>全选</span></td>

　　　　 <td><input type="checkbox" id="antiChecked"><span>全选</span></td>

</tr>

<tr>

<td><input type="checkbox"  class="sonChecked"></td>

<td>1</td>

</tr>

<tr>

<td><input type="checkbox"  class="sonChecked"></td>

<td>2</td>

</tr>

<tr>

<td><input type="checkbox"  class="sonChecked"></td>

<td>3</td>

</tr>

</tr>

<td><input type="checkbox"  class="sonChecked"></td>

<td>4</td>

</tr>

<tr>

<td><input type="checkbox"  class="sonChecked"></td>

<td>5</td>

</tr>

</table>

</body>

</html>

//全选（id="allChecked"）  反选（id="antiChecked"） 选项列表（class="sonChecked"） 选择使用id，class， name等属性作为选择器都可以，根据自己的文档来确定。

//javascript代码（原生的）

//条件检测，兼容性

if(!document.getElementById) return;

var allCheck         =  document.getElementById('allChecked');

var antiCheck      = document.getElementById('antiChecked');

//条件检测，兼容性

if(!document.getElementsByClassName) return;

var sonChecks   =  document.getElementsByClassName('sonChecked');

//全选操作

allCheck.click = function(){

　　var allCheckState = allCheck.checked;

　　for(var i = 0;i<listChecks.length; i++){

　　　　if(listChecks[i].checked!=allCheckState){

　　　　　　listChecks[i].click();

　　　　}

　　}

}

//反选操作

antiCheck.click= function(){

　　for(var i = 0;i<listChecks.length;i++){

　　　　listChecks[i].click();

　　}

}

//列表项行为

for(var i = 0;i<listChecks.length;i++){

　　listChecks[i].click= function(){

　　　　for(var i=0;i<listChecks.length;i++){

　　　　　　if(!listChecks[i].checked){

　　　　　　　　allCheck.checked = false;

　　　　　　　　return;

　　　　　　}

　　　　}

allCheck.checked = true;

}

}

//也可以将这几个方法直接封装成函数，然后传入参数，直接调用，但如果是这样的话不建议在HTML里面使用 onchange="function(A,B)"之类的，应该将javascript与HTML分离。

checkbox 全选，反选 ，全不选的更多相关文章

  1. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

    页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...

  3. 表单Checkbox全选反选全不选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. checkbook全选/反选/全不选

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  5. vue实现单选多选反选全选全不选

    单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...

  6. WPF DataGrid CheckBox 多选 反选 全选

    效果图 实现此效果的必要关键是 Style+DataTemplate 关键代码: <Window.Resources> <DataTemplate x:Key="Check ...

  7. html js 全选 反选 全不选源代码

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

  8. js实现全选,反选,全不选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

  9. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  10. jquery、js全选反选checkbox

    操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...

随机推荐

  1. 今日随笔：scrollTop与overflow

    今天想写一个页面一加载滚动条就自动滚到底部的效果,结果在IE上实现成功了,chrome上完全没反应,最后测试了一下,居然是因为css文件中,html,body都写了overflow:auto这一语句, ...

  2. OWASP top10

    PhishTank 是互联网上免费提供恶意网址黑名单的组织之一,它的黑名单由世界各地的志愿者提供,且更新频繁. 1.XSS 1.1. XSS简介 跨站脚本攻击,英文全称是Cross Site Scri ...

  3. linux dynamic debug 官方教程

    下载内核后,文档在:Documentation/dynamic-debug-howto.txt 中文版本:http://www.oschina.net/translate/dynamic-debug- ...

  4. Bootstrap_导航条

    一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个 ...

  5. 第十四天 jni 的使用

    1. ndk 环境 2.jni hello 程序. 3.javah 生成头文件. 4.java 和c 之间数据传递. 5.C语言回调java 代码 通过反射.得到字节码,得到方法...

  6. 转｛QQ浏览器X5内核问题汇总｝

    转自https://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/ 常常被人问及微信中使用的X5内核的问题,其实我也不是很清楚,只知道它 ...

  7. LINUX CP 跳过询问是否覆盖

    有两个方法可以解决此问题: 1..bashrc里面注释掉 Alias cp＝'cp -i' 2.使用 \cp 命令(在cp前加一个'\')

  8. Linux中关于安装包的分析。——Arvin

    初接解LINUX的,同样都是for linux,但rpm.tar.gz.deb包还是有很大区别的,这种区别可使安装过程进行不下去.那我们应该下载什么格式的包呢? rpm包-在红帽LINUX.SUSE. ...

  9. jsonp 跨域 能返回数据但 无法返回成功问题

    apihandler.ashx?callback=eqfeed_callback:1Uncaught SyntaxError: Unexpected token : 原因在于jsonp传的数据格式不一 ...

  10. Laravel 5 使用中的问题记录（持续更新）

    1.更新了blade模板却没有更新缓存 通过使用ftp上传文件到服务器,更新了blade模板,却没有更新缓存,经查,原因是系统时间的影响,通过ftp上传的模板文件修改时间与缓存文件的时间不一致,导致模 ...