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 Perfection kill 测试及答案
Mar 23 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
js动态生成表格(节点操作)
Jan 12 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 404错误页面实现代码
2009/06/22 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP new static 和 new self详解
2017/02/19 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python中的引用和拷贝浅析
2014/11/22 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
简单了解python的一些位运算技巧
2019/07/13 Python
Django之模板层的实现代码
2019/09/09 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
企划经理的岗位职责
2013/11/17 职场文书
班组长的岗位职责
2013/12/09 职场文书
应用艺术专业个人的自我评价
2014/01/03 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP