首页 技术 正文
技术 2022年11月20日
0 收藏 465 点赞 2,689 浏览 1950 个字

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

原理:

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分离。

上一篇: easyui datagrid
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,104
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,580
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,428
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,200
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,835
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,918