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

原理：

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. ajax （返回类型：text）

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  2. struct内存对齐1：gcc与VC的差别

    struct内存对齐:gcc与VC的差别 内存对齐是编译器为了便于CPU快速访问而采用的一项技术,对于不同的编译器有不同的处理方法. Win32平台下的微软VC编译器在默认情况下采用如下的对齐规则:  ...

  3. [问题2014S10] 复旦高等代数II（13级）每周一题（第十教学周）

    [问题2014S10]  设 \(A,B\) 为 \(n\) 阶方阵, 证明: \(AB\) 与 \(BA\) 相似的充分必要条件是 \[\mathrm{rank}\big((AB)^i\big)=\ ...

  4. Linux - 进程查看与管理

    标签(空格分隔): Linux 进程的静态查看 查看系统所有进程 ps -ef -- 输出来好乱,看不懂..: ps aux -- a表示所有与终端相关的进程,u表示所有以用户组织的进程状态的信息,x ...

  5. 基于chrome内核的UXSS

    url with a leading NULL byte can bypass cross origin protection. https://code.google.com/p/chromium/ ...

  6. MYSQL转换JSON

    http://51strive.com/ <!DOCTYPE html><html><head><meta charset="UTF-8" ...

  7. Java与JavaScript的区别

    (1)执行方式不同 java:是编译语言,需要先编译再执行 JavaScript:无需编译,直接执行 (2)数据类型不同 java:强数据类型语言 JavaScript:弱数据类型语言 (3)运行位置 ...

  8. [bzoj1103][POI2007]大都市meg(树状数组+dfs序)

    1103: [POI2007]大都市meg Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2031  Solved: 1069[Submit][Sta ...

  9. Android Studio教程从入门到精通

    最新2.0系列文章参考: Android Studio2.0 教程从入门到精通Windows版 - 安装篇Android Studio2.0 教程从入门到精通Windows版 - 入门篇Android ...

  10. Deep Learning 17：DBN的学习_读论文“A fast learning algorithm for deep belief nets”的总结

    1.论文“A fast learning algorithm for deep belief nets”的“explaining away”现象的解释: 见:Explaining Away的简单理解 ...