详细解读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

}

}

}

相关文章
|
4月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
154 1
|
3月前
|
JavaScript
原生JS实现全选、全不选
原生JS实现全选、全不选
|
4月前
|
JavaScript 前端开发
JavaScript解决多选框全选、全不选和反选的问题
JavaScript解决多选框全选、全不选和反选的问题
26 0
|
10月前
单选、全选、反选、获得所有选中的checkbox
单选、全选、反选、获得所有选中的checkbox
|
JavaScript 前端开发
一行jQuery代码搞定checkbox 全选和全不选
一行jQuery代码搞定checkbox 全选和全不选
|
JavaScript
原生js实现全选全不选
原生js实现全选全不选
47 0
|
JavaScript
element checkbox复选框实现全选功能
element checkbox复选框实现全选功能
|
JavaScript
全选,全不选,反选,批量操作
js $(function () { var $choose = $("#choose input"); $("#all").click(function () { $choose.
1214 0