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 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
js模拟弹出效果代码修正版
Aug 07 Javascript
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
原生js无缝轮播插件使用详解
Mar 09 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 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
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
PHP文件操作详解
2016/12/30 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
python 判断网络连通的实现方法
2018/04/22 Python
浅谈python之新式类
2018/08/12 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
Linux文件操作命令都有哪些
2015/02/27 面试题
药学专业大学生自荐信
2013/09/28 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
纪律教育月活动总结
2014/08/26 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
上课迟到检讨书
2015/05/06 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL