关于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";    }}

其实我觉得不管是用背景图还是checkbox，其中的中心思想都是一样的~

希望以后能有更好的办法！