实现checkbox的全选/全不选/点选/行内点选(原生JS版和jQ版)
2011-11-07 13:36
465 查看
转载自 一款比较实用齐全的jQuery表单验证插件@Mr.Think
日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数.
功能介绍 点此查看DEMO
1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致;
2. 自动更改 全选/全不选 选框的状态, 即列表中选框都选中时, 全选/全不选 选框也选中, 反之亦然;
3. 列表行内点击也可选中行内的checkbox, 并与1,2中的功能联动.
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();
}
}
JQuery版本代码:
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());
}
});
具体的实现可以参考本文提供的Demo!
日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数.
功能介绍 点此查看DEMO
1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致;
2. 自动更改 全选/全不选 选框的状态, 即列表中选框都选中时, 全选/全不选 选框也选中, 反之亦然;
3. 列表行内点击也可选中行内的checkbox, 并与1,2中的功能联动.
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();
}
}
JQuery版本代码:
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());
}
});
具体的实现可以参考本文提供的Demo!
相关文章推荐
- 实现checkbox的全选/全不选/点选/行内点选(原生JS版和jQ版)
- 实现checkbox的全选/全不选/点选/行内点选(原生JS版和jQ版)
- 实现checkbox的全选/全不选/点选/行内点选(原生JS版和jQ版)
- 原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
- 用自定义图片代替原生checkbox实现全选,删除以及提交的方法
- jquert结合原生javascript实现的checkbox全选与全不选
- 用自定义图片代替原生checkbox实现全选,删除以及提交
- 用自定义图片代替原生checkbox实现全选,删除以及提交的方法
- (转) 用自定义图片代替原生checkbox实现全选,删除以及提交
- 实现全选和取消全选(JavaScript控制CheckBox 的全选与取消全选)
- 点滴积累【JS】---JS小功能(checkbox实现全选和全取消)
- jQuery CheckBox全选、全不选实现代码小结
- checkbox全选/取消全选以及checkbox遍历jQuery实现代码
- jquery实现checkbox全选,全不选
- Jquery 利用单个复选款(checkbox)实现全选、反选
- jquery实现checkbox全选,反选,取消选择
- Form中实现Checkbox全选反选
- html checkbox 实现全选/取消全选
- jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
- angularjs实现 checkbox全选、反选的思考