checkbox的全选与反选

最新推荐文章于 2022-12-09 09:28:33 发布

weixin_30530523

最新推荐文章于 2022-12-09 09:28:33 发布

阅读量231

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/rocking/p/4713547.html

版权

需求：

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

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

Html结构

首先，我们得到我们要控制的元素，并且用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

}

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

}

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

完整代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
all<input id="all" type="checkbox" onclick="check()">
<button type="button" onclick="fanx()">反选</button>
</body>
<script type="text/javascript">
    var all=document.getElementById("all")
    var box=document.getElementsByTagName("input")

    for (i = 0; i < box.length-1; i++) {
        box[i].onclick = onclike
    }

    //通过变量j来计算有多少选项被选中，如果被选中的个数等于总个数，则全选的checked属性为true
    function onclike2() {
        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
    }


    function check() {
        for (i = 0; i < box.length-1; i++) {
            box[i].checked = all.checked
        }
    }


    function fanx(){

        for (i = 0; i < box.length-1; i++)
        {
            if(box[i].checked){
                box[i].checked=false
            }
            else
            {
                box[i].checked=true
            }

        }

    }

</script>
</html>

转载于:https://www.cnblogs.com/rocking/p/4713547.html

weixin_30530523

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
checkbox的全选与反选

需求： 1.当all选项勾选时，所有选项都被勾选，反正当所有选项被选中时，全选选项自动选中 2.点击反选按钮时，被选中的选项取消选中，未被选中的选项被选中Html结构<input type="checkbox"><input type="checkbox"><input type="checkbox"><i...
复制链接

扫一扫