jquery 页面全选框实践代码


Posted in Javascript onApril 02, 2010
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>全选</title> 
</head> 
<body> 
<div>demo 
<input type="button" onclick="alert(ob.checkedIds());" value="选中ID"/> 
<input type="button" onclick="alert(ob.checkedTexts());" value="选中值"/> 
<input type="button" onclick="alert(ob.checkedKeys('value1'));" value="选中属性值"/> 
</div> 
<table class="infor"> 
<tr> 
<th><input name="allcheck" id="allcheck1" type="checkbox" value="1"/> 
全选</th> 
</tr><tr> 
<td><input name="record" type="checkbox" value="1" value1="11"/>去 
</td></tr><tr> 
<td><input name="record" type="checkbox" value="2" value1="22"/>啊 
</td></tr><tr> 
<td><input name="record" type="checkbox" value="3" value1="33"/>我 
</td></tr><tr> 
<td><input name="record" type="checkbox" value="4" value1="44"/>饿 
</td></tr> 
</table> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" > 
//http://www.cnblogs.com/libsource 
(function($){ 
$.allcheck=function(options){ 
_defaults = { 
allcheckid:"allcheck", 
checkboxname:'record' 
}; 
o = $.extend(_defaults,options); 
_allck=$("#"+o.allcheckid); 
_tbl=_allck.parents("table"); 
//返回所有选中checkbox的id集合 
checkedIds=function () { 
var ids = ""; 
$("input[name=" + o.checkboxname + "]").each(function() { 
if ($(this).attr("checked")) 
ids += $(this).val() + ","; 
}); 
return ids.replace(/,$/,''); 
} 
//返回所有选中checkbox的key属性集合 
checkedKeys=function (key) { 
var ids = ""; 
$("input[name=" + o.checkboxname + "]").each(function() { 
if ($(this).attr("checked")) 
ids += $(this).attr(key) + ","; 
}); 
return ids.replace(/,$/,''); 
} 
//返回所有选中checkbox的文本集合 
checkedTexts=function () { 
var txts = ""; 
$("input[name=" + o.checkboxname + "]").each(function() { 
if ($(this).attr("checked")) 
txts += gtrim($(this).parent().text()) + ","; 
}); 
return txts.replace(/,$/,''); 
} 
gtrim=function (txt) { 
return txt.replace(/(^\s*)|(\s*$)/g, ""); 
} 
//设置所有选中checkbox的id集合 
setCheckedIds=function (checkids) { 
checkids = ","+checkids+","; 
$("input[name=" + o.checkboxname + "]").each(function() { 
if (checkids.match(","+$(this).val()+",")) 
$(this).attr("checked","checked"); 
}); 
} 
//检查所有checkbox是否全选 
_checkAll=function () { 
if (this.checked && $("input:checkbox:not([checked]):not(#" + o.allcheckid + ")", _tbl).length == 0) 
_allck[0].checked = true; 
else 
_allck[0].checked = false; 
} //全选checkbox状态 
_setAllChecked=function () { 
if (!this.checked) 
$("input:checkbox", _tbl).removeAttr("checked"); 
else 
$("input:checkbox", _tbl).not(this).attr("checked", "checked"); 
} 
_allck.click(_setAllChecked); 
$("input:checkbox[name="+o.checkboxname+"]").each(function(){$(this).click(_checkAll);}); 
return {checkedIds:checkedIds,checkedKeys:checkedKeys,checkedTexts:checkedTexts,setCheckedIds:setCheckedIds}; 
}; 
})(jQuery); 
</script> 
<script type="text/javascript"> 
var ob=$.allcheck({allcheckid:'allcheck1'}); 
//设置选项allcheckid checkboxname 
//取返回值可以调用checkedIds,checkedKeys,checkedTexts 
</script> 
</body> 
</html>
Javascript 相关文章推荐
jQuery DOM操作小结与实例
Jan 07 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
在JavaScript中使用timer示例
May 08 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 #Javascript
jquery select下拉框操作的一些说明
Apr 02 #Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 #Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 #Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 #Javascript
Javascript 类与静态类的实现(续)
Apr 02 #Javascript
用js实现计算加载页面所用的时间
Apr 02 #Javascript
You might like
PHP5 安装方法
2006/10/09 PHP
用session做客户验证时的注意事项
2006/10/09 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
Laravel日志用法详解
2016/10/09 PHP
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
深入探究node之Transform
2017/07/20 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python学习开发mock接口
2019/04/28 Python
超实用的 30 段 Python 案例
2019/10/10 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
Python实现SMTP邮件发送
2020/06/16 Python
Python接收手机短信的代码整理
2020/08/02 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
信用社员工先进事迹材料
2014/02/04 职场文书
本科生自荐信
2014/06/18 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书