实现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/  转载请注明出处