jQuery实现复选框全选/所有取消/反选/获得选择的值
<!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>username</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>jQuery实现复选框全选/所有取消/反选/获得选择的值的更多相关文章
- Jquery表格变色 复选框全选，反选
/*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- jQuery 前端复选框 全选 反选 下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
- jQuery中的几个案例：隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
- jQuery实现复选框 全选、反选、全不选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jQuery 实现复选框全选、反选及获取选中的值
实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- JavaScript小例子：复选框全选
JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
- 复选框全选、全不选和反选的效果实现VIEW:1592
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 原来，多年以来，我一直是个curl/CRUD程序员
curl,就是create,update,remove,list的首字母简写.说是CRUD似乎更流行些,不过无所谓,知道是一个意思就好. curl程序员,就是增改删查程序员,中文说增删改查更加顺口. ...
- 【Nginx】HTTP配置模型
当Nginx检測到配置文件里存在配置块http{}时.会建立一个ngx_http_conf_ctx_t结构体,该结构体定义例如以下: typedef struct { void **main_conf ...
- 51单片机 | 使用D/A转换器实现三角波发生器
———————————————————————————————————————————— D/A转换器 CS=0.ILE=1时,WR1信号有效时将数据总线上的信号写入8位输入锁存器 XFER=0时,W ...
- mongoDB: cursor not found on server
查询mongoDB集合数据更新,数据有400w多.我一次用cursor(游标)取1w,处理更新.程序在某段时间运行中遍历游标时发生异常! DBCursor cursor = tabColl.find( ...
- Android 应用程序分析
从这点上看,android应用程序实际上是由多个Activity按照一定的次序拼装起来的, 只不过拼装的过程中,后台传递了一些数据,使得各个Activity之间能比较好的衔接起来. 在 and ...
- 安装Reshaper后Intellisense失效
安装Reshaper后Intellisense失效或希望用vs2017的Intellisense功能 安装完毕后,IDE 的智能提示(Intellisense)便会默认使用 Resharper 的提示 ...
- C++井字棋游戏，DOS界面版
据说有一个能保证不败的算法.明天看看先再写个PVC版的. 正题.今天无聊写了个井字棋游戏,顺便逐渐让自己习惯良好的代码风格,放上来给新手学习学习. jzq2.cpp /* N字棋游戏PVP版,DOS版 ...
- Hadoop2.6.0子项目hadoop-mapreduce-examples的简介
引文 学习Hadoop的同学们,一定知道假设执行Hadoop自带的各种样例,以大名鼎鼎的wordcount为例,你会输入下面命令: hadoop org.apache.hadoop.examples. ...
- ASP.NET MVC自定义视图引擎ViewEngine 创建Model的专属视图
MVC内置的视图引擎有WebForm view engine和Razor view engine,当然也可以自定义视图引擎ViewEngine. 本文想针对某个Model,自定义该Model的专属视图 ...
- 机器学习12—FP-growth学习笔记
test12.py #-*- coding:utf-8 import sys sys.path.append("fpGrowth.py") import fpGrowth from ...