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 数值型和字符串型之间的转换
Jul 25 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
JavaScript门面模式详解
Oct 19 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 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中SESSION使用中的一点经验总结
2012/03/30 PHP
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
python实现名片管理器的示例代码
2019/12/17 Python
Pygame的程序开始示例代码
2020/05/07 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
资产经营总监岗位职责
2013/12/04 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
司仪主持词两篇
2014/03/22 职场文书
研究生导师推荐信
2014/09/06 职场文书
法定代表人身份证明书
2014/09/10 职场文书
授权委托书公证
2014/09/14 职场文书
中学生思想品德评语
2014/12/31 职场文书
客房服务员岗位职责
2015/02/09 职场文书
学校党员干部承诺书
2015/05/04 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python