日常項目中, 對于列表類文章或數據, 大概都會用到checkbox的全選或全不選的功能, 以前的項目中也寫過checkbox的選擇js, 但都沒有整理過. 正好前幾天一個兄弟遇到了這個問題, 索性, 我花了點時間, 用原生JS與jQuery分別寫了一個版本, 考慮到使用時靈活性問題, 未封裝, 需要的童鞋使用時自行改下相關參數.
功能介紹點此查看DEMO演示
1. 全選/全不選 選框一體實現, 即列表中選框的狀態與全選/全不選框前的選框狀態一致;
2. 自動更改 全選/全不選 選框的狀態, 即列表中選框都選中時, 全選/全不選 選框也選中, 反之亦然;
3. 列表行內點擊也可選中行內的checkbox, 并與1,2中的功能聯動.
另,本文重在寫全選, 鼠標劃入劃出背景變色為簡易實現, 更加完善的請參考:
//m.survivalescaperooms.com/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實現的全選/全不選,點行也可選中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS實現的全選/全不選,點行也可選中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS實現的全選/全不選,點行也可選中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS實現的全選/全不選,點行也可選中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS實現的全選/全不選,點行也可選中或取消</dd> <dt><label for="js_chk_1"><input type="checkbox" id="js_chk_1" name="chk_can" value="" />全選/全不選</label></dt> </dl> </form>
原生js代碼
//原生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 = ''; } }}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核心實現代碼
//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()); } });});這個代碼比普通的實現代碼要多不少，主要表現為點擊行就可以實現選擇功能。更多的功能更多的代碼。大家可以根據需要自行刪減。
相信很多做web的人都會遇到一些JS問題，那到底是用JQ來實現還是用JS來實現，常常困擾著我們，但其實JS是通用的，而JQ是建在自己加載的JQ庫的，所在真正實現是沒有任何區別的。
新聞熱點
疑難解答
