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 相关文章推荐
js中设置元素class的三种方法小结
Aug 28 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 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之第七天
2006/10/09 PHP
谈谈新手如何学习PHP
2006/12/23 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
python绘图方法实例入门
2015/05/19 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
python中time tzset()函数实例用法
2021/02/18 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
什么是.net的Remoting技术
2016/07/08 面试题
国庆节演讲稿范文2014
2014/09/19 职场文书
安全生产月标语
2014/10/07 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
客服专员岗位职责
2015/02/10 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
2016年父亲节寄语
2015/12/04 职场文书