关于checkbox全选的问题_关于checkbox 全选子选项没变化-优快云博客

本文介绍两种实现checkbox全选的方法：一种使用jQuery简化DOM操作，一种使用原生JavaScript结合闭包技术；并展示了如何通过背景图片替换模拟checkbox状态。

今天要来写一个关于checkbox全选的问题，早上帮同学做了个例子，发现我对于这里面还是很混乱的，所以要做一个例子合集来提醒自己一下。

分为两种一种是直接使用checkbox 一种是使用背景图片

checkbox

<input type="checkbox" id="All" />
<div class="other" id="otherBox">
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>

这是我的结构

第一种 jq写法

现在来写行为，引入的是jquery-1.12.3.js这个版本的jQuery

// 这个是全选的按钮 判断如果全选勾选那么其他的input都需要勾选 如果取消 则剩下的input都取消
$('#All').click(function() {
    if($(this).is(":checked")) {
        $('.other').children('input').each(function() {
            $(this).prop("checked", true);
        })

    } else {
        $('.other').children('input').each(function() {
            $(this).prop("checked", false);
        })
    }
})
// 这个是单个勾选 其实可以不用再写出来 但是我为了判断当我全部勾选时 全选也会自动被勾上
$('.other').children('input').on('click', function() {
   if($(this).is(":checked")) {
       $(this).prop("checked", true);
       judge();
   } else {
       $(this).prop("checked", false);
       judge();
   }
});
// 这是为了判断是否全部勾选所做的一个函数
function judge() {
    $('.other').children('input').each(function() {
        if($(this).is(':checked')) {
            $('#All').prop("checked", true);
        } else {
            $('#All').prop("checked", false);
        }
    })
}

第二种 JS写法

// 这里开始获取ID名
var All = document.getElementById('All');
            var otherBoxs = document.getElementById('otherBox').children;
// 全选
All.onclick = function() {
     if(All.checked) {
         for(var i = 0 ; i < otherBoxs.length; i++) {
             otherBoxs[i].checked = true;
         }
     } else {
         for(var i = 0 ; i < otherBoxs.length; i++) {
             otherBoxs[i].checked = false;
         }
     }
 }
var checkLen = 0;
// 单选
for(var i = 0; i < otherBoxs.length; i++) {
    otherBoxs[i].onclick = function(num) {
         return function() {
             if(otherBoxs[num].checked) {
                 checkLen++;
                 judge();
             } else {
                 checkLen--;
                 judge();
             }
         }
     }(i);
}
// 判断
function judge() {
    if(checkLen == otherBoxs.length) {
        All.checked = true;
    } else {
        All.checked = false;
    }
}

我用JS写的时候，在单选用了一个闭包，试了一下别的方法，结果没有成功，我觉得用上闭包有点复杂，等以后看一下还有没有更好的办法。

背景图片

其实我觉得相对于checkbox来说，背景图片会较为简单一些，因为只需要用类名转换就可以实现了
先看结构样式


<style type="text/css">
    #All {
        width: 16px;
        height: 16px;
    }
    .normal {

        background: url('../images/b-btn.png');
    }
    .select {
        background: url('../images/b-btn1.png');
    }
    .other span {
        display: block;
        width: 16px;
        height: 16px;
    }
</style>
<div class="normal" id="All"></div>
<div class="other" id="otherBox">
    <span class="normal"></span>
    <span class="normal"></span>
    <span class="normal"></span>
</div>

勾选是select 未勾选为normal

第一种 jq写法

$('#All').on('click', function() {
    if($(this).is('.select')) {
        $(this).removeClass('select');
        $('.other').find('span').removeClass('select');

    } else {
        $(this).addClass('select');
        $('.other').find('span').addClass('select');

    }
});
var secArr = [];
$('.other').find('span').on('click', function() {
    if($(this).is('.select')) {
        $(this).removeClass('select');
        secArr.pop('1');
        judge();
    } else {
        $(this).addClass('select');
        secArr.push('1');
        judge();
    }
});
function judge() {
    if(secArr.length == $('.other').find('span').length) {
        $('#All').addClass('select');
    } else {
        $('#All').removeClass('select');
    }

}

第二种 JS写法

var All = document.getElementById('All');
var otherBoxs = document.getElementById('otherBox').children;
var AllClick = true;
All.onclick = function() {
    if(AllClick) {
        All.className = "select"; 
        AllClick = false; 
        for(var i = 0; i < otherBoxs.length; i++) {
            otherBoxs[i].className = "select";
        }
    } else {
        All.className = "normal";
        AllClick = true;
        for(var i = 0; i < otherBoxs.length; i++) {
            otherBoxs[i].className = "normal";
        }
    }
}
var checkLen = 0;
for(var i = 0; i < otherBoxs.length; i++) {
    otherBoxs[i].onclick = function() {
        if((this.className == "normal")) {
            this.className = "select";
            checkLen++;
            judge();
        } else {
            this.className = "normal";
            checkLen--;
            judge();
        }
    }
}
function judge() {
    if(checkLen == otherBoxs.length) {
        All.className = "select";
    } else {
        All.className = "normal";
    }
}