實現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();
}
}
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());
}
});
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/ 轉載請注明出處。
全站熱搜
留言列表
