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选中该复选框来实现/全部取消/未选定/获得的选定值的更多相关文章
- 11月8日下午Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- javascript 动态控制复选框的选择和取消
这里就需要引入一个jquery-1.4.2.js 就行了,因为用到了里面的选择器 <html> <head> <script type="text/javasc ...
- Jquery学习笔记:操作form表单元素之二(复选框和单选框)
在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="i ...
- jquery:获取checked复选框的问题
jquery:获取checked复选框的问题 功能描述:要完成一个全选的功能,但总是获取不到复选框的被选中的个数,究其原因,是Jquery中length和checked使用不当所造成的. // 获取所 ...
- 【jQuery】对于复选框操作的attr与prop
这个是在jQuery1.6版本号之后出现的鬼东西.受影响的主要有下拉列表select与复选框checkbox.众所周知.在jQuery中能够用attr()取出节点的属性,然而对于checkbox却不是 ...
- 表格中的checkbox复选框 全选非全选 公共方法 及提交选中结果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 使用JQuery做一组复选框的功能。
之前做过复选框的功能,奈何笔记丢失,害的我又鼓捣了一番...还是博客园做笔记比较好. 假设现在有一个表格,每一行都有一个复选框按钮.在表头还有一个全选的复选框按钮. ①.当点击一个全选按钮时,下面的同 ...
- 转载:Bootstrap之表格checkbox复选框全选
转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...
随机推荐
- 无尽的循环ViewPager
现在的情况 不改变的源代码,什么时候ViewPager滑动到最后item的时候,他就无法再往右滑动:当ViewPager滑动到第一个item的时候,他也无法再往前滑动. (以上全是废话) 设想 我们能 ...
- C该结构变化 struct typedef
这几天看代码,看到若干类型的结构,例如下列结构声明: struct book{ string name; int price; int num; }; 此种结构定义结构变量的格式例如以下: ...
- Maven本地仓库配置
一. 为什么配置? 默认情况下,maven的本地仓库在C盘下用户文件夹: .m2/repository.全部的maven构件(artifact)都被存储到该仓库中.以方便重用. 可是放在C盘一个是占用 ...
- 使用CASE表达式替代SQL Server中的动态SQL
原文:使用CASE表达式替代SQL Server中的动态SQL 翻译自: http://www.mssqltips.com/sqlservertip/1455/using-the-case-expre ...
- 警告: git command could not be found. Please create an alias or add it to yo
5 Answers active answertab=oldest#tab-top" title="Answers in the order they were provided& ...
- sqlserver不能直接create table as select
sqlserver不能直接create table as select 在sqlserver 下想复制一张表的,想到oracle下直接create table xxx as select * from ...
- (二)给IE6-IE9中的input添加HTML5新属性-placeholder
同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...
- 设计模式(Facade)状态(注意事项)
外观模式(Facade),子系统的一组接口提供一个一致的界面,该模式定义了一个高层次接口,这个接口使得这一子系统更加easy采用. 外观模式完美地体现了依赖反转原则,迪米特法则的想法,式之中的一个. ...
- RMQ(模板 ST 区间最值,频繁的间隔时间)
PS: 介绍:http://blog.csdn.net/liang5630/article/details/7917702 RMQ算法.是一个高速求区间最值的离线算法,预处理时间复杂度O(n*log( ...
- 创意HTML5文字特效 类似翻页的效果
原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...