快捷導航

原生JS版和jquery版實現(xiàn)checkbox的全選/全不選/點選/行內(nèi)點選(Mr.Think)

更新時間：2016年10月29日 21:12:48 作者：Mr.Think

腳本之家小編之前整理不少checkbox全選全不選這方便的文章，但看了這篇以后發(fā)現(xiàn)實現(xiàn)方法更好

日常項目中, 對于列表類文章或數(shù)據(jù), 大概都會用到checkbox的全選或全不選的功能, 以前的項目中也寫過checkbox的選擇js, 但都沒有整理過. 正好前幾天一個兄弟遇到了這個問題, 索性, 我花了點時間, 用原生JS與jQuery分別寫了一個版本, 考慮到使用時靈活性問題, 未封裝, 需要的童鞋使用時自行改下相關(guān)參數(shù).

功能介紹點此查看DEMO演示

1. 全選/全不選選框一體實現(xiàn), 即列表中選框的狀態(tài)與全選/全不選框前的選框狀態(tài)一致;
2. 自動更改全選/全不選選框的狀態(tài), 即列表中選框都選中時, 全選/全不選選框也選中, 反之亦然;
3. 列表行內(nèi)點擊也可選中行內(nèi)的checkbox, 并與1,2中的功能聯(lián)動.
另,本文重在寫全選, 鼠標劃入劃出背景變色為簡易實現(xiàn), 更加完善的請參考:

http://m.fzitv.net/article/24125.htm

原生JS版本核心代碼

html代碼

<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></dt>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS實現(xiàn)的全選/全不選,點行也可選中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS實現(xiàn)的全選/全不選,點行也可選中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS實現(xiàn)的全選/全不選,點行也可選中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS實現(xiàn)的全選/全不選,點行也可選中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS實現(xiàn)的全選/全不選,點行也可選中或取消</dd>
			<dt><label for="js_chk_1"><input type="checkbox" id="js_chk_1" name="chk_can" value="" />全選/全不選</label></dt>
		</dl>
	</form>

原生js代碼

//原生JS實現(xiàn)全選全不選類
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');
	
 //判斷選中個數(shù)與實際選框個數(shù)實現(xiàn)全選/全不選框的狀態(tài)
 var chk_canle = function(){
  var checkedLen = 0;
		//計算列表中選中狀態(tài)的選框個數(shù)
  for (var m = 0; m < jsitems.length; m++) {
   if (jsitems[m].checked) {
    checkedLen += 1;
   }
  }
		//判斷選中個數(shù)與實際個數(shù)是否相同,以確定全選/全不選狀態(tài)
  for (var m = 0; m < js_chk.length; m++) {
   js_chk[m].checked = (jsitems.length == checkedLen);
  }
 }
 
	//全選與全不選一體實現(xiàn)
 for (var i = 0; i < js_chk.length; i++) {
  js_chk[i].onclick = function(){
			//列表中選框與全選選框統(tǒng)一狀態(tài)
   for (var m = 0; m < jsitems.length; m++) {
    jsitems[m].checked = this.checked;
   }
			//全選選框統(tǒng)一狀態(tài)
   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();
  }
 }
	
 //行內(nèi)點擊
 for (var i = 0; i < jsrows.length; i++) {
  jsrows[i].onclick = function(){
			//行內(nèi)點擊時,行內(nèi)的選框狀態(tài)為原狀態(tài)取反
   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 = '';
  }
 }
}

jquery版本核心代碼

html代碼

<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></dt>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全選/全不選,點行也可選中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全選/全不選,點行也可選中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全選/全不選,點行也可選中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全選/全不選,點行也可選中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全選/全不選,點行也可選中或取消</dd>
			<dt><label for="jq_chk_1"><input type="checkbox" id="jq_chk_1" name="chk_can" value="" />全選/全不選</label></dt>
		</dl>
	</form>

jquery核心實現(xiàn)代碼

//jQ實現(xiàn)全選全不選
$(function(){
 var _jq_chk = $('#jq>dl>dt>label>:checkbox');
 var _jqitems = $(':checkbox[name=jqitems]');
 var _rows = $('#jq>dl>dd');
 
 //全選與全不選一體實現(xiàn)
 _jq_chk.click(function(){
		//列表中選框和全選選框統(tǒng)一狀態(tài)
  _jqitems.add(_jq_chk).attr('checked', this.checked);
 });
	
 //選框的點擊事件
 _jqitems.click(function(e){
  //阻止冒泡,避免行點擊事件中,直接選擇選框無效
  e.stopPropagation();
		//判斷選中個數(shù)與實際個數(shù)是否相同,以確定全選/全不選狀態(tài)
  _jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
 });
	
 //點選行時選中行內(nèi)的checkbox
 _rows.bind({
  mouseenter: function(){
   $(this).addClass('hover');
  },
  mouseleave: function(){
   $(this).removeClass('hover');
  },
		//點選
  click: function(){
			//行內(nèi)點擊時,行內(nèi)的選框狀態(tài)為原狀態(tài)取反
   $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').get(0).checked)
			//判斷選中個數(shù)與實際個數(shù)是否相同,以確定全選/全不選狀態(tài)
   _jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
  }
 });
});

這個代碼比普通的實現(xiàn)代碼要多不少，主要表現(xiàn)為點擊行就可以實現(xiàn)選擇功能。更多的功能更多的代碼。大家可以根據(jù)需要自行刪減。

相信很多做web的人都會遇到一些JS問題，那到底是用JQ來實現(xiàn)還是用JS來實現(xiàn)，常常困擾著我們，但其實JS是通用的，而JQ是建在自己加載的JQ庫的，所在真正實現(xiàn)是沒有任何區(qū)別的。

您可能感興趣的文章: