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 相关文章推荐
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 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生成EXCEL的东东
2006/10/09 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
js如何打印object对象
2015/10/16 Javascript
前端性能优化及技巧
2016/05/06 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
女性时尚网购:Chic Me
2019/07/30 全球购物
学生自我鉴定模板
2013/12/30 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
党员作风建设自查报告
2014/10/23 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
酒店员工管理制度
2015/08/05 职场文书