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 相关文章推荐
详解JavaScript函数绑定
Aug 18 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
详解Node全局变量global模块
Sep 28 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 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调用VC编写的COM组件实例
2014/03/29 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
功能完善的小程序日历组件的实现
2020/03/31 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
使用python遍历指定城市的一周气温
2017/03/31 Python
python版本五子棋的实现代码
2018/12/11 Python
python感知机实现代码
2019/01/18 Python
python3转换code128条形码的方法
2019/04/17 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
成人教育自我鉴定
2013/11/01 职场文书
投标单位介绍信
2014/01/09 职场文书
白酒市场营销方案
2014/02/25 职场文书
统计专业自荐书
2014/07/06 职场文书
商业门面租房协议书
2014/11/25 职场文书
放假通知
2015/04/14 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL