日常项目中， 对于列表类文章或数据， 大概都会用到checkbox的全选或全不选的功能，以前的项目中也写过checkbox的选择js，但都没有整理过。 正好前几天一个兄弟遇到了这个问题， 索性， 我花了点时间，用原生JS与jQuery分别写了一个版本，考虑到使用时灵活性问题，未封装，需要的童鞋使用时自行改下相关参数。
　　功能介绍点此查看DEMO
　　1、 全选/全不选 选框一体实现，即列表中选框的状态与全选/全不选框前的选框状态一致。
　　2、 自动更改 全选/全不选 选框的状态，即列表中选框都选中时，全选/全不选 选框也选中， 反之亦然。
　　3、 列表行内点击也可选中行内的checkbox，并与1，2中的功能联动。
　　另,本文重在写全选，鼠标划入划出背景变色为简易实现, 更加完善的请参考: http://mrthink.NET/Javascript-tagnames-highlight/.
　　原生JS版本核心代码

var js_chk = document.forms['js'].chk_can;
var jsitems = document.forms['js'].jsitems;
var jsrows = document.getElementById('js').getElementsByTagName('dd');
 
// 判断选中个数与实际选框个数实现全选/全不选框的状态
var chk_canle = function(){
    var checkedLen = 0;
    //计算列表中选中状态的选框个数
    for (var m = 0; m < jsitems.length; m++) {
        if (jsitems[m].checked) {
            checkedLen += 1;
        }
    }
    //判断选中个数与实际个数是否相同,以确定全选 /全不选状态
    for (var m = 0; m < js_chk.length; m++) {
        js_chk[m].checked = (jsitems.length == checkedLen);
    }
}
 
//全选与全不选一体实现
for (var i = 0; i < js_chk.length; i++) {
    js_chk[i].onclick = function(){
        //列表中选框与全选选框统一状态
        for (var m = 0; m < jsitems.length; m++) {
            jsitems[m].checked = this.checked;
        }
        //全选选框统一状态
        for (var m = 0; m < js_chk.length; m++) {
            js_chk[m].checked = this.checked;
        }
    }
}
 
//列表中选框点击
for (var i = 0; i < jsitems.length; i++) {
    jsitems[i].onclick = function(e){
        //阻止冒泡,避免行点击事件中,直接选择选框无效
        e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble=true;
        chk_canle();
    }
}
 
// 行内点击
for (var i = 0; i < jsrows.length; i++) {
    jsrows[i].onclick = function(){
        //行内点击时,行内的选框状态为原状态取反
        this.getElementsByTagName('input')[0].checked = !this.getElementsByTagName('input')[0].checked;
        chk_canle();
    }
}        

        

        
        
      
        
it知识库：实现checkbox的全选/全不选/点选/行内点选(原生JS版和jQ版)，转载需保留来源！
        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。