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

原理：

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. HDU 5686：2016"百度之星" - 资格赛 Problem B

    原文链接:https://www.dreamwings.cn/hdu5686/2645.html Problem B Time Limit: 2000/1000 MS (Java/Others)    ...

  2. 修改mysql表结构,添加一个主键索引自增字段,修改原来的主字段为普通字段

    原来有一个字段id,为自增,主键,索引.现在要新增一个字段s_id为自增,主键,索引.同时把原来的主字段改成普通字段,默认值为0. Alter table e_diamond_jhds change ...

  3. 嵌入式之Linux系统裁剪和定制---（kernel+busyboxy+dropbear+nginx）

    本文将介绍通过完全手动定制内核,在此基础上添加 busybox ,并实现远程登陆,使裁剪的 linux 能够运行 nginx . 在此之前介绍一下 linux 系统的启动流程. linux系统启动流程 ...

  4. spring cache

    spring-ehcache.xml文件内容如下: <?xml version="1.0" encoding="UTF-8"?> <beans ...

  5. c#委托（1）

    // 委托声明 -- 定义一个签名:delegate double MathAction(double num); class DelegateTest{ // 符合委托声明的常规方法 static ...

  6. 我的android学习经历32

    android系统架构 1.Linux内核层(LINUX KERNEL) 这是系统架构的最低层,这层为android设备的硬件提供了驱动 2.系统运行库层(LIBRARIES) 这一层为倒数第二层,利 ...

  7. jdbc中如何实现模糊查询

    情况如何 再利用jdbc执行sql语句的时候,对于其他的句子的执行没什么太大的问题:加上占位符,然后设置占位符的值. 但是在模糊查询的时候,一直都写不对,这里提供了两种可选的解决办法,以供参考. 解决 ...

  8. Learning Roadmap of Deep Reinforcement Learning

    1. 知乎上关于DQN入门的系列文章 1.1 DQN 从入门到放弃 DQN 从入门到放弃1 DQN与增强学习 DQN 从入门到放弃2 增强学习与MDP DQN 从入门到放弃3 价值函数与Bellman ...

  9. "旋转的风车"----windows(GDI)绘图

    这正是秋季将尽, 冬季未到的时节. 黄土高坡上已滚起了漫天黄沙, 而这里却是万里晴空如练!  风, 丝丝入骨! 未央柳即将枯死的枝条,仍在挣扎. 街道两旁清一色的银杏树叶, 金灿耀眼. 耀的令人感动, ...

  10. javascript事件代理(Event Delegation)

    看了几篇文章,放上来供参考 司徒正美的文章,Event Delegation Made Easy --------------------------------------------------- ...