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 相关文章推荐
js 刷新页面的代码小结 推荐
Apr 02 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
js获取微信版本号的方法
May 12 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
8个有意思的JavaScript面试题
Jul 30 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加密解密示例分享
2014/01/29 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
js几个验证函数代码
2010/03/25 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
跟老齐学Python之print详解
2014/09/28 Python
python中常用检测字符串相关函数汇总
2015/04/15 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
Python多线程原理与用法详解
2018/08/20 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
经典c++面试题三
2015/07/08 面试题
导游的职业规划书范文
2013/12/27 职场文书
高中生物教学反思
2014/02/05 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
植树节标语
2014/06/27 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python