详细解读checkbox的全选与反选

简介: 详细解读checkbox的全选与反选

需求:

1.当all选项勾选时,所有选项都被勾选,反正当所有选项被选中时,全选选项自动选中

2.点击反选按钮时,被选中的选项取消选中,未被选中的选项被选中

Html结构

all

反选

首先,我们得到我们要控制的元素,并且用for循环给每个checkbox绑定点击事件:

var all=document.getElementById("all")

var box=document.getElementsByTagName("input") //此处选中了所有的input,包括全选按钮本身,在后面的操作中需要注意

for (i = 0; i < box.length-1; i++) {

box【i】.onclick = onclike

}

1.全选

分析:我们让每个checkbox的checked属性都等于全选的checked属性,则可实现全选和全不选的操作,代码如下:

function check() {

  for (i = 0; i < box.length-1; i++) {

  box【i】.checked = all.checked

  }

}

2.反向全选

分析:

方案一:通过变量j来计算有多少选项被选中,如果被选中的个数等于总个数,则全选的checked属性为true,代码如下:

function onclike() {

var j=0

for (i = 0; i < box.length - 1; i++) {

  if (box【i】.checked) {

  j++

  }

}

all.checked=(j==box.length-1)

    /if(j==box.length-1)

    {

    all.checked=true

    }

    else

     {

    all.checked=false

     }/

}

方案二:只要有一个选项未被选择中,则全选属性为false,通过逻辑与的方式将每个选项的布尔值与之前比较,代码如下:

function onclike()

{

var flag=true

for (i = 0; i < box.length - 1; i++) {

var ifChecke = box【i】.checked

flag = flag ifChecke

}

all.checked=flag

}//代码效果参考:http://www.ezhiqi.com/zx/art_998.html

3.反选

分析:当checked为true为真时,使其为false,否则为true,代码如下:

function fanx(){

for (i = 0; i < box.length-1; i++)

{

if(box【i】.checked){

box【i】.checked=false

}

else

{

box【i】.checked=true

}//代码效果参考:http://www.ezhiqi.com/zx/art_6706.html

}

}

————————————————————————————————————————————————————————————————————————————

完整代码

<!DOCTYPE html

[/span>html

[/span>head lang="en"

[/span>meta charset="UTF-8"

[/span>title

[/span>body

[/span>input type="checkbox"

[/span>input type="checkbox"

[/span>input type="checkbox"

[/span>input type="checkbox"

[/span>input type="checkbox"

[/span>input type="checkbox"

all[/span>input id="all" type="checkbox" onclick="check()"

[/span>button type="button" onclick="fanx()"

[/span>script type="text/javascript"

var all=document.getElementById("all")

var box=document.getElementsByTagName("input")

for (i = 0; i [/span> box.length-1; i++) {

box【i】.onclick = onclike

}

//通过变量j来计算有多少选项被选中,如果被选中的个数等于总个数,则全选的checked属性为true

function onclike2() {

var j=0

for (i = 0; i [/span> box.length - 1; i++) {

if (box【i】.checked) {

j++

}

}

all.checked=(j==box.length-1)

/if(j==box.length-1)

{

all.checked=true

}

else

{

all.checked=false

}/

}

//只要有一个选项未被选择中,则全选属性为false,通过逻辑与的方式将每个选项的布尔值与之前比较

function onclike()

{

var flag=true

for (i = 0; i [/span> box.length - 1; i++) {

var ifChecke = box【i】.checked

flag = flag ifChecke

}

all.checked=flag

}

function check() {

for (i = 0; i [/span> box.length-1; i++) {

box【i】.checked = all.checked

}

}

function fanx(){

for (i = 0; i [/span> box.length-1; i++)

{

if(box【i】.checked){

box【i】.checked=false

}

else

{

box【i】.checked=true

}

}

}

相关文章
|
JavaScript
uniapp中复选框的使用
uniapp中复选框的使用
636 0
|
安全 微服务
(七)、Eureka自我保护
(七)、Eureka自我保护
(七)、Eureka自我保护
|
传感器 编解码 人工智能
一个强大的音视频编解码库-rkmedia的应用
一个强大的音视频编解码库-rkmedia的应用
798 0
|
10月前
|
存储 NoSQL 数据库
Redis 逻辑数据库与集群模式详解
Redis 是高性能内存键值数据库,广泛用于缓存与实时数据处理。本文深入解析 Redis 逻辑数据库与集群模式:逻辑数据库提供16个独立存储空间,适合小规模隔离;集群模式通过分布式架构支持高并发和大数据量,但仅支持 database 0。文章对比两者特性,讲解配置与实践注意事项,并探讨持久化及性能优化策略,助你根据需求选择最佳方案。
474 5
vue 计算属性,实现复选框的全选和反选 【小案例】
本文通过一个Vue.js小案例,展示了如何使用计算属性实现复选框的全选和反选功能。计算属性的完整写法包括get和set两部分,分别用于获取值和设置值。在全选和反选的场景中,计算属性的get方法用于判断所有复选框是否都已选中,从而控制全选复选框的状态;计算属性的set方法则用于根据全选复选框的状态,批量更新每个复选框的选中状态。通过示例代码和效果图,文章清晰地说明了计算属性在实现这一功能中的作用和效果。
vue 计算属性,实现复选框的全选和反选 【小案例】
|
机器学习/深度学习 人工智能 API
aliyun评测零门槛、即刻拥有 DeepSeek-R1 满血版
DeepSeek-R1满血版是一款零门槛、高性能的深度学习工具,旨在帮助开发者和研究人员高效实现创新。评测显示,其操作界面设计友好,左右分屏布局使理论与实践紧密结合,极大提升了操作连贯性和效率。用户可轻松获取API-KEY,并通过Chatbox配置进行深度学习对话,整个过程简单流畅。该工具在部署集成性、易用性及高性能计算支持方面表现出色,尤其适合本地软件部署,满足用户的实际需求。阿里云提供的详尽文档和引导也使得初次使用者能快速上手,体验极佳。
346 1
|
Linux 数据库
Linux中第一次使用locate命令报错?????
在Linux CentOS7系统中,使用`locate`命令时出现“command not found”错误,原因是缺少`mlocate`包。解决方法是通过`yum install mlocate -y`或`apt-get install mlocate`安装该包,并执行`updatedb`更新数据库以解决后续的“can not stat”错误。
355 9
|
JSON PHP 数据格式
蓝易云 - PHP用CURL发送Content-type为application/json的POST请求方法
在这段代码中,我们首先创建了一个包含我们要发送的数据的数组,并使用 `json_encode`函数将其转换为JSON格式。然后,我们初始化了一个cURL会话,并设置了一些选项,包括POST请求方法、要发送的数据、返回结果和HTTP头部信息。最后,我们执行了cURL请求并关闭了会话。
690 2
|
前端开发 JavaScript UED
如何巧妙实现element-plus中el-tree-v2的自适应横向滚动?
以上方法描述了如何使用简单的CSS和合适的HTML结构来巧妙实现在Element Plus库中 `el-tree-v2` 组件的自适应横向滚动功能。这种方法易于理解和实现,无需复杂的脚本或框架修改,只需利用CSS的强大功能即可完成。这有助于节省开发时间,同时能够提供良好的用户体验。
1057 0
|
前端开发 JavaScript
【Web 前端】$(document).ready() 是个什么函数?为什么要用它?
【5月更文挑战第2天】【Web 前端】$(document).ready() 是个什么函数?为什么要用它?