详细解读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中复选框的使用
526 0
|
安全 微服务
(七)、Eureka自我保护
(七)、Eureka自我保护
(七)、Eureka自我保护
parseFloat和toFixed的作用,如何使用?
parseFloat和toFixed的作用,如何使用?
305 0
vue 计算属性,实现复选框的全选和反选 【小案例】
本文通过一个Vue.js小案例,展示了如何使用计算属性实现复选框的全选和反选功能。计算属性的完整写法包括get和set两部分,分别用于获取值和设置值。在全选和反选的场景中,计算属性的get方法用于判断所有复选框是否都已选中,从而控制全选复选框的状态;计算属性的set方法则用于根据全选复选框的状态,批量更新每个复选框的选中状态。通过示例代码和效果图,文章清晰地说明了计算属性在实现这一功能中的作用和效果。
vue 计算属性,实现复选框的全选和反选 【小案例】
|
开发框架 前端开发 JavaScript
CodeSandbox
【8月更文挑战第29天】CodeSandbox
539 62
|
存储 缓存 关系型数据库
关系型数据库MySQL的Memory (HEAP)
【6月更文挑战第17天】
199 4
|
API UED
深入理解 uni-app 中的加载提示:uni.showLoading
深入理解 uni-app 中的加载提示:uni.showLoading
7033 0
|
C# 开发者 Windows
不可不知的WPF转换(Transform)
【9月更文挑战第14天】在 Windows Presentation Foundation(WPF)中,转换(Transform)是一种强大的工具,允许开发者以多种方式操纵图形和界面元素的外观与位置。主要类型包括平移、旋转、缩放和倾斜转换。通过组合这些转换,可以实现更复杂的效果,并且可以与 WPF 的动画系统结合,创建动态界面效果。掌握 WPF 转换是成为优秀开发者的必备技能之一。
263 6
|
网络协议 Windows
【常用命令】netstat -ano命令图文详细说明
【常用命令】netstat -ano命令图文详细说明
1018 0
|
前端开发 JavaScript UED
如何巧妙实现element-plus中el-tree-v2的自适应横向滚动?
以上方法描述了如何使用简单的CSS和合适的HTML结构来巧妙实现在Element Plus库中 `el-tree-v2` 组件的自适应横向滚动功能。这种方法易于理解和实现,无需复杂的脚本或框架修改,只需利用CSS的强大功能即可完成。这有助于节省开发时间,同时能够提供良好的用户体验。
715 0