jQuery实现复选框全选/取消全选/反选及获得选择的值


Posted in Javascript onJune 12, 2014
<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
// 全选/取消全部 
$("#checkAllChange").click(function() { 
if (this.checked == true) { 
$(".userid").each(function() { 
this.checked = true; 
}); 
} else { 
$(".userid").each(function() { 
this.checked = false; 
}); 
} 
}); 
// 全选 
$("#checkAll").click(function() { 
$(".userid").each(function() { 
this.checked = true; 
}); 
}); 
// 取消全部 
$("#removeAll").click(function() { 
$(".userid").each(function() { 
this.checked = false; 
}); 
}); 
// 反选 
$("#reverse").click(function() { 
$(".userid").each(function() { 
if (this.checked == true) { 
this.checked = false; 
} else { 
this.checked = true; 
} 
}) 
}); 
//批量删除 
$("#delAll").click(function() { 
var arrUserid = new Array(); 
$(".userid").each(function(i) { 
if (this.checked == true) { 
arrUserid[i] = $(this).val(); 
} 
}); 
alert("批量删除的:" + arrUserid); 
}); 
}); 
</script> 
</head> <body> 
<table border="1"> 
<tr> 
<td><input type="checkbox" id="checkAllChange" /></td> 
<td>用户id</td> 
<td>用户名</td> 
<td>电话</td> 
<td>地址</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="1" /></td> 
<td>1</td> 
<td>wangzs1</td> 
<td>18888000</td> 
<td>浦东</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="2" /></td> 
<td>2</td> 
<td>wangzs2</td> 
<td>18888001</td> 
<td>上海</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="3" /></td> 
<td>3</td> 
<td>wangzs3</td> 
<td>18888002</td> 
<td>河南</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="4" /></td> 
<td>4</td> 
<td>wangzs4</td> 
<td>18888003</td> 
<td>许昌</td> 
</tr> 
<tr> 
<td></td> 
<td><input type="button" id="checkAll" value="全选" /></td> 
<td><input type="button" id="removeAll" value="取消全部" /></td> 
<td><input type="button" id="reverse" value="反选" /></td> 
</tr> 
<tr> 
<td colspan="4" align="center"><input type="button" value="批量删除" id="delAll"></td> 
</tr> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 #Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 #Javascript
自己封装的javascript事件队列函数版
Jun 12 #Javascript
jquery动态添加删除一行数据示例
Jun 12 #Javascript
checkbox勾选判断代码分析
Jun 11 #Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 #Javascript
js获取日期:昨天今天和明天、后天
Jun 11 #Javascript
You might like
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP的加密方式及原理
2012/06/14 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
使用Apache的rewrite
2021/03/09 Servers
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
Python中的变量和作用域详解
2016/07/13 Python
Python中super函数的用法
2017/11/17 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
电大物流学生的自我评价
2013/10/25 职场文书
追悼会上的答谢词
2014/01/10 职场文书
中英文求职信范文
2014/01/27 职场文书
高三高考决心书
2014/03/11 职场文书
学生检讨书怎么写
2014/10/09 职场文书
python tkinter实现定时关机
2021/04/21 Python
golang实现浏览器导出excel文件功能
2022/03/25 Golang