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

原理：

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. javscript 中的术语和俚语

    语言中俚语和方言.在JavaScript中也有一些俚语或者说是术语,看似奇淫巧技,还是有一些用处,有三种语言组件可以来构造术语:强转.逻辑运算符和位变换. 1.强转:在javascript和大部分的语 ...

  2. fidder 使用教程

    fidder 使用教程 1. Fiddler 是什么? Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器.英语中Fiddler是小提琴的意思,Fiddler Web Debugge ...

  3. spring netty-socket.io

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

  4. 【Java】聊聊常用的非对称加密算法之一RSA的使用（Java）

    参考的优秀文章 Java加密技术(四)——非对称加密算法RSA RSA算法原理(一).RSA算法原理(二) RSA的公钥和私钥到底哪个才是用来加密和哪个用来解密? 简单的介绍 RSA是有名的非对称加密 ...

  5. Zabbix安装图解教程

    说明: 操作系统:CentOS IP地址:192.168.21.127 Web环境:Nginx+MySQL+PHP zabbix版本:Zabbix 2.2 LTS 备注:Linux下安装zabbix需 ...

  6. Java-简陋的图书管理

    本文代码为原创一个简陋的管理系统,只做功能的测试.并没有去完善所有应有的功能,只做了输入输出查找.仅供参考! 菜单部分: import java.util.Scanner; public class ...

  7. Popwindow

    popwindow的使用方法 View contentView = LayoutInflater.from(mContext).inflate( R.layout.dialog_homelist_vi ...

  8. 2.4G高频PCB天线设计

    2.4G高频PCB天线设计 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明.   参考链接: http://bbs.rfeda.cn/read-htm-t ...

  9. MultiProvider

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  10. python ConfigParser配置读写

    一.ConfigParser简介 ConfigParser 是用来读取配置文件的包.配置文件的格式如下:中括号"[ ]"内包含的为section.section 下面为类似于key ...