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实现的在新窗口打开链接的方法小结
Apr 22 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
浅析return false的正确使用
Nov 04 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 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
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
php正则表达式学习笔记
2015/11/13 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
如何基于jQuery实现五角星评分
2020/09/02 jQuery
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
python截取两个单词之间的内容方法
2018/12/25 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
python递归函数用法详解
2020/10/26 Python
用python发送微信消息
2020/12/21 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
高山背包:High Sierra
2017/11/23 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
创联软件面试题笔试题
2012/10/07 面试题
青春演讲稿范文
2014/05/08 职场文书
文员岗位职责
2015/02/04 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
化验室安全管理制度
2015/08/06 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
cypress测试本地web应用
2022/06/01 Javascript
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL