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

原理：

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. js遍历数组的错误方法

    for (var index in myArray) { // don't actually do this console.log(myArray[index]); } 缺点: 数组的索引值inde ...

  2. log4j.properties的配置

    #初始化类中要使用的Logger对象实例:log4j.rootLogger = [ level ] , appenderName1, appenderName2, … #第一个参数是日志级别(DEBU ...

  3. jQuery validation学习（2）验证身份证

    验证邮编 jQuery.validator.addMethod("isZipCode", function(value, element) { -]{}$/; return thi ...

  4. Tsung安装与使用

    Tsung安装与使用 Tsung安装与使用的详细说明,包括测试场景的脚本配置说明 Ray 2013/11/11   目录 安装tsung Tsung运行环境安装... Tsung安装... 使用Tsu ...

  5. 内核编译选配（VMware篇）

    出现这个错误的原因是相应的驱动程序没有编译进内核,所以在内核启动时,不认识分区. 一.磁盘驱动没编译进内核 VMware5.5.3 的磁盘有两种,一种是IDE的,一种是SCSI的:VMware 你在新 ...

  6. centos6.6编译安装lnmp系列之mysql

    简介: 环境:虚拟机+centos6.6 Mysql版本:5.6.21 Mysql下载地址:http://cdn.mysql.com/archives/mysql-5.6/mysql-5.6.21.t ...

  7. ExtJs

    ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架.      概念 1.ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用 ...

  8. js处理iframe中子页面与父页面里面对象的取得的解决方案

    [1]子页面取得父页面的dom对象   parent.window.$('#id').val("");   [2]父页面取得子页面的对象   $(window.frames[&qu ...

  9. 学习mongo系列（十一）关系

    准备工作:首先在maxh数据库的address集合中先插入数据 > db.address.insert({child_address:"gansu"}) WriteResul ...

  10. jquery动画基础

    根据id改变字体大小的动画 <div class="speech">样式切换</div> <div id="switcher"&g ...