js：复选框，点击全选再次点击取消。

2024-04-07 04:43:26

1.如题，不是简单的反选，而是奇数点击是全部选中，偶数点击时全不选，如需要反选，注释分隔符之间代码，放出反选代码即可。
2.经IE、firefox、360、opera测试兼容目前主流浏览器，直接复制代码可运行，看着比较多，其实删除注释后没几行。

操作方法

01

这是html中代码：  <input type="checkbox" id="checkbox" value="1" onclick="check()" />  <input type="checkbox" value="${article.id}" name="box" /> <input type="checkbox" value="${article.id}" name="box" /> <input type="checkbox" value="${article.id}" name="box" /> <input type="checkbox" value="${article.id}" name="box" /> <input type="checkbox" value="${article.id}" name="box" /> ......
02

js代码如下： <script type="text/javascript"> //复选框onclick事件：点击全选，再次点击全不选 function check(){ //添加外部判断：奇数点击时value为1，全不选，否则全选，如此可以在反选与全选间衍生出极端选择的方案 var checkbox = document.getElementById('checkbox'); //value初始化为1，此处的三目执行后value一定不为1，而页面初始化时checkbox都为未选中状态，所以value为1时全不选 checkbox.value==1?checkbox.value=2 : checkbox.value=1; var checkboxs = document.getElementsByName('box'); for(var i=0; i<checkboxs.length;i++){ //************ if(checkbox.value==1){ checkboxs[i].checked=false;//全不选 }else{ checkboxs[i].checked=true;//全选 } //************ //checkboxs[i].checked?checkboxs[i].checked=false:checkboxs[i].checked=true;//反选 }} </script>

赞 (0)

ppt怎么全选幻灯片? ppt幻灯片全选的快捷键

在办公过程中,制作的PPT需要选中全部幻灯片,怎么去操作呢?下面一起来看看吧 1.打开PPT,单击左边任意幻灯片,如图所示 2.按住Ctrl+A,即选中全部幻灯片,如图所示 3.对于选中的幻灯片就可以 ...
复选框全选功能怎么实现

复选框的全选是前端开发人员经常需要开发的功能,这个功能简而言之就是,点击全选就可以选中所有的复选框,那么我们怎么才能实现这个功能呢?笔者来告诉大家,来给大家一点提示,代码不是唯一的(下图gif即为实现 ...
为Win7资源管理器添加文件选择复选框

我们在工作和学习中有时会在Win7的资源管理器中挑选很多不同的文件和文件夹，然后做拷贝、移动或者删除操作。有多时候，不管是按时间、名称、类型还是体积大小排序，想要选择的这些文件夹和文件未必都能规规矩矩 ...
为windows7系统资源管理器添加文件复选框的方法

为windows7系统资源管理器添加文件复选框的方法：按快捷键“Win+E”或者直接鼠标双击“计算机”图标，在Win7资源管理器界面中点击“组织—文件夹和搜索选项”。 (编注：如果您的Win7系统桌 ...
windows7系统始终使用选择程序打开的复选框无法勾选

确保您的系统是win7 当我们设置某一种文件类型的打开方式的时候,某些时候会遇到无法设置默认打开方式的情况,如下图(这里是以.java文件为例) 也就是说"始终使用该应用程序打开文件"的复选框是无法勾 ...
如何在Excel中一键添加复选框？

相信很多小伙伴在日常办公中都会用到Excel,在其中如何一键添加复选框呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,在Excel中打开我们要进行操作的表格,并将要添加复选框的区域选中. ...
win10电脑里的文件或文件夹前面如何加上复选框

随着win10系统的流行,很多人都选择使用win10系统了,但是对一些功能却不是那么熟悉,今天就给大家介绍一下win10电脑里的文件或文件夹前面如何加上复选框的具体操作步骤.1. 首先打开电脑后,在桌 ...
如何在word中插入复选框（打对勾）

本文实现在word中插入复选框的功能.插入的复选框,可以直接点击进行勾选以及取消勾选操作.大致实现步骤为在开发工具中选择复选框插入到word中即可.详细实现见步骤中的描述(本例中使用的为Office ...
jQuery怎样实现全选功能和全不选功能呢

全选功能在网页中也是非常常见的,比如购物平台的购物车就有全选和全不选的功能,今天咪咪我就来教教大家怎样用jQuery来实现这些功能. 操作方法 01 如图,先设置好一些简单的可勾选的选项,这里我就设置 ...