新手学JavaScript（四）----CheckBox全选与全不选

    前两天开发界面时，实现了一个新的小功能，CheckBox复选框的全选与全不选

样式的实现

纯CSS实现 VS JQuery+CSS实现

    在这给大家推荐一款比较不错的纯CSS实现的CheckBox–CSSCheckBox，用bootstrap里面自带的checkbox和radio样式不太美观，所以就另找了一个插件，这里大家可能会有疑问，为什么要找一个纯CSS实现的CheckBox？

    在这里给大家解释一下，如果说你找的Checkbox是用CSS+Javascript实现的话，在界面首次加载的时候，都需要加载Javascript事件，这个事件的目的就是给已经加载到页面上的checkbox加上一层外包装！举个栗子：有一框也非常不错的插件–ICheck，当初的第一意愿就是用它，但是后来就发现问题了，首先你要在界面上引用ICheck的css样式和HTML：

//CSS样式
<link href="your-path/square/color-scheme.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

//HTML
<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

然后再js的首次加载事件中初始化：

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_square',
    radioClass: 'iradio_square',
    increaseArea: '20%' // optional
  });
});
</script>

初始化的目的就是给上面的input加上一层外包装，但是我在后边用的时候发现一个问题，就是当你的checkbox不是在jsp中提前写好的而是通过动态加载的时候，ICheck初始化的渲染就无法顺利的给所有的checkbox加上外包装，所以说我就只能去找一个纯CSS实现的checkbox，这样你引用了相应的样式，只要在class中赋相应的样式的值就可以了！

    下面就给大家介绍纯CSS实现的CheckBox，首先在界面上引用CSS样式：

<link href="${pageContext.request.contextPath}/Script/CssCheckboxKit/style.css" rel="stylesheet" type="text/css"/>

页面数据是动态拼接到界面出来的，只需要在拼接的时候在在每个input的class中加上css-checkbox的样式就行了。

<div id="class_check" class="row" style=" width:1000px;margin-top: 5px;">
    <input id="checkbox0" class="css-checkbox" type="checkbox" value="28ZcWdULn7sMLFJdSP52P7" onclick="checkedSel()" name="checkboxClass">
    <label class="css-label" for="checkbox0">12级环境设计本科1班</label>
    <input id="checkbox1" class="css-checkbox" type="checkbox" value="26YZq2UyhvCGJVYw4jqpEM" onclick="checkedSel()" name="checkboxClass">
    <label class="css-label" for="checkbox1">15商务礼仪</label>
</div>

全选与全不选的实现

全选，全不选

    全选的话，其实有很多的实现方法，大家可以在网上查一查，有很多都值得收藏，我在这只是用其中的一种来实现的：

    //实现checkbox全选和全不选的功能，并同时加载数据
    function selectAll(obj){

        var sonSelect=document.getElementsByName("checkboxClass");

        for(var i=0;i<sonSelect.length;i++)
        {
            sonSelect[i].checked=obj.checked;
        }

        checkClick(sonSelect);
    }

全选则全选，有一个不选则不全选

    可能不太理解上面的这句话，我在这解释下，意思是：如果说子复选框全部选中的话，全选复选框就选中；如果子复选框中有一个没有选中，那么全选复选框就不选中。

    那怎么做呢？首先判断这一组的子复选框有几个，然后判断选中的复选框有几个，进行对比就可以实现：

   //获取选中的checkbox的数量
    var count;
    function checkCount(checkArry){
        count=0;
        for (var i = 0; i < checkArry.length; i++) { 
            if(checkArry[i].checked == true){
                 //选中的操作
                 count++; 
            }
       }
    }

    //当所有的子复选框被选中时，全选复选框选中；
    //只要有一个子复选框没有被选中，全选复选框便为非选中状态
    function checkedSel(){

        var checkArry = document.getElementsByName("checkboxClass");
        checkCount(checkArry);

        if( count == checkArry.length ){  //如果选中的数量和总的数量相等，为全部选中

            document.getElementById("checkboxAll").checked=true;
            checkClick(checkArry);

        }else
        {
            document.getElementById("checkboxAll").checked=false;
            checkClick(checkArry);
        }
    }