原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

<form id="js" name="js" action="#">
		<h5>原生JS样例</h5>
		<dl>
			<dt><label for="js_chk_0"><input type="checkbox" id="js_chk_0" name="chk_can" value="" />全选/全不选</label><https://img.qb5200.com/download-x/dt>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消<https://img.qb5200.com/download-x/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消<https://img.qb5200.com/download-x/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消<https://img.qb5200.com/download-x/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消<https://img.qb5200.com/download-x/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消<https://img.qb5200.com/download-x/dd>
			<dt><label for="js_chk_1"><input type="checkbox" id="js_chk_1" name="chk_can" value="" />全选/全不选</label><https://img.qb5200.com/download-x/dt>
		<https://img.qb5200.com/download-x/dl>
	</form>

//原生JS实现全选全不选类
window.onload = function iCheckAll(){
 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();
  }
		//划入划出请参考http://mrthink.net/javascript-tagnames-highlight/
  jsrows[i].onmouseover = function(){
   this.className = 'hover';
  }
  jsrows[i].onmouseout = function(){
   this.className = '';
  }
 }
}

<form id="jq" name="jq" action="#">
		<h5>jQuery样例</h5>
		<dl>
			<dt><label for="jq_chk_0"><input type="checkbox" id="jq_chk_0" name="chk_can" value="" />全选/全不选</label><https://img.qb5200.com/download-x/dt>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消<https://img.qb5200.com/download-x/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消<https://img.qb5200.com/download-x/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消<https://img.qb5200.com/download-x/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消<https://img.qb5200.com/download-x/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消<https://img.qb5200.com/download-x/dd>
			<dt><label for="jq_chk_1"><input type="checkbox" id="jq_chk_1" name="chk_can" value="" />全选/全不选</label><https://img.qb5200.com/download-x/dt>
		<https://img.qb5200.com/download-x/dl>
	</form>

//jQ实现全选全不选
$(function(){
 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());
  }
 });
});