实现checkbox的全选/全不选/点选/行内点选(原生JS版和jQ版)

　　日常项目中， 对于列表类文章或数据， 大概都会用到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();
    }
}
   
   
   
   

　　jQ版本核心代码

   
   
   
   

    
    
    
    
    var
    
    
    
     _jq_chk 
    
    
    
    =
    
    
    
     $(
    
    
    
    '
    
    
    
    #jq>dl>dt>label>:checkbox
    
    
    
    '
    
    
    
    );

    
    
    
    var
    
    
    
     _jqitems 
    
    
    
    =
    
    
    
     $(
    
    
    
    '
    
    
    
    :checkbox[name=jqitems]
    
    
    
    '
    
    
    
    );

    
    
    
    var
    
    
    
     _rows 
    
    
    
    =
    
    
    
     $(
    
    
    
    '
    
    
    
    #jq>dl>dd
    
    
    
    '
    
    
    
    );
 

    
    
    
    //
    
    
    
     全选与全不选一体实现
    
    
    
    

    
    
    
    _jq_chk.click(
    
    
    
    function
    
    
    
    (){
    
    
    
    
    //
    
    
    
    列表中选框和全选选框统一状态
    
    
    
    

    
    
    
        _jqitems.add(_jq_chk).attr(
    
    
    
    '
    
    
    
    checked
    
    
    
    '
    
    
    
    , 
    
    
    
    this
    
    
    
    .checked);
});
 

    
    
    
    //
    
    
    
    选框的点击事件
    
    
    
    

    
    
    
    _jqitems.click(
    
    
    
    function
    
    
    
    (e){
    
    
    
    
    //
    
    
    
    阻止冒泡,避免行点击事件中,直接选择选框无效
    
    
    
    

    
    
    
        e.stopPropagation();
    
    
    
    
    //
    
    
    
    判断选中个数与实际个数是否相同,以确定全选/全不选状态
    
    
    
    

    
    
    
        _jq_chk.attr(
    
    
    
    '
    
    
    
    checked
    
    
    
    '
    
    
    
    , _jqitems.size() 
    
    
    
    ==
    
    
    
     _jqitems.filter(
    
    
    
    '
    
    
    
    :checked
    
    
    
    '
    
    
    
    ).size());
});
 

    
    
    
    //
    
    
    
    点选行时选中行内的checkbox
    
    
    
    

    
    
    
    _rows.bind({
    mouseenter: 
    
    
    
    function
    
    
    
    (){
        $(
    
    
    
    this
    
    
    
    ).addClass(
    
    
    
    '
    
    
    
    hover
    
    
    
    '
    
    
    
    );
    },
    mouseleave: 
    
    
    
    function
    
    
    
    (){
        $(
    
    
    
    this
    
    
    
    ).removeClass(
    
    
    
    '
    
    
    
    hover
    
    
    
    '
    
    
    
    );
    },
    
    
    
    
    //
    
    
    
    点选
    
    
    
    

    
    
    
        click: 
    
    
    
    function
    
    
    
    (){
        
    
    
    
    //
    
    
    
    行内点击时,行内的选框状态为原状态取反
    
    
    
    

    
    
    
            $(
    
    
    
    this
    
    
    
    ).find(
    
    
    
    '
    
    
    
    :checkbox
    
    
    
    '
    
    
    
    ).attr(
    
    
    
    '
    
    
    
    checked
    
    
    
    '
    
    
    
    , 
    
    
    
    !
    
    
    
    $(
    
    
    
    this
    
    
    
    ).find(
    
    
    
    '
    
    
    
    :checkbox
    
    
    
    '
    
    
    
    ).get(
    
    
    
    0
    
    
    
    ).checked)
        
    
    
    
    //
    
    
    
    判断选中个数与实际个数是否相同,以确定全选/全不选状态
    
    
    
    

    
    
    
            _jq_chk.attr(
    
    
    
    '
    
    
    
    checked
    
    
    
    '
    
    
    
    , _jqitems.size() 
    
    
    
    ==
    
    
    
     _jqitems.filter(
    
    
    
    '
    
    
    
    :checked
    
    
    
    '
    
    
    
    ).size());
    }
});
   
   
   
   

　　原文发布Mr.Think的博客:http://mrthink.net/js-jq-checkboxevent/ 转载请注明出处。