新手学JavaScript（四）----CheckBox全选与全不选
新手学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);
}
}