jQuery 复选框全选/取消全选/反选
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;
});
} // www.jbxue.com
});
// 全选
$("#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>
jQuery 复选框全选/取消全选/反选的更多相关文章
- CheckedListBoxControl 实现复选框的单选与多选功能
由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...
- JQuery的复选框选中、取消、全选,全不选问题
一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...
- jQuery实现checkbox(复选框)选中、全选反选代码
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
- jQuery对复选框(checkbox)的全选,全不选,反选等的操作
效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...
- 复选框(checkox)全选、全不选、反选、获得选中项值的用例
HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...
- jquery 循环获取checkBox的值,以及对复选框选中,取消,操作按钮
法一:jquery 循环获取选中checkBox框的值 function checkeds() { $("input:checkbox").each(function(index) ...
- 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面
<%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...
- JavaScript实现单击全选 ,再次点击取消全选
以下为实现思路,已测试,供参考 var allSet = document.getElementById('allSet');//获取全选按钮元素 var a = allSe ...
- firefox(火狐)下 js中设置checkbox属性checked="checked"已有,但复选框却不显示勾选的原因
刚看到问题时以为是浏览器兼容性的原因,ie.google都能正常显示. 网上查询之后发现是jQuery的attr()方法用的不恰当. jQuery1.6之前使用attr()可以修改 ,从jQuery ...
- jquery 实现 单选框点击取消
<label for="1" class="z-label"> <input type="radio" class=&qu ...
随机推荐
- Thrift 文件的格式及可用的数据类型
编写thrift文件是,须要知道thrift文件支持的数据类型有哪些.假设定义Service等.以下是官方文档的说明: # # Thrift Tutorial # Mark Slee (mcslee@ ...
- Discuz常见小问题-如何快速安装和配置
下载PHPNOW 可以解压到本地的某个目录,最好不要有中文路径,然后查看Readme进行安装,双击Setup.cmd 安装结束之后,会要求输入一个初始化的密码,不要忘记,会自动弹出一个测试页面,可以测 ...
- php 内置函数JSON处理
一:生成json数据 <?php $arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); echo json_enco ...
- vscode - 设置中文语言
记得上次安装的时候,自动提示安装本地语言包,现在的版本貌似不会了吧. 1.先安装扩展,按键CTRL+SHIFT+P 输入 ext install ,最后输入:language,大概就可以找到简体中文包 ...
- Java从零开始学三十九(对象序列化)
一.序列化 将对象的状态存储到特定存储介质中的过程 对象序列化,就是把一个对象变为二进制的数据流的一种方法,通过对象序列化可以方便的实现对象的传输或存储. 序列化保存对象的“全景图”,构建对象的“ ...
- Java从零开始学零(Java简介)
一.Java 简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James Gosling和同事们共同研发,并在1995年 ...
- JSTL 标签库 使用(web基础学习笔记十九)
标签库概要: 一.C标签库介绍 1.1.<c:> 核心标签库 JSTL 核心标签库(C标签)标签共有13个,功能上分为4类:1.表达式控制标签:out.set.remove.catch2 ...
- 改进版高速排序(平均复杂度O(NlogN))
#include<iostream> using namespace std; #define MAXSIZE 21 typedef int SqList[MAXSIZE]; #defin ...
- TOD&FIXME&XXX
TODO: + 说明: 如果代码中有该标识,说明在标识处有功能代码待编写,待实现的功能在说明中会简略说明.FIXME: + 说明:如果代码中有该标识,说明标识处代码需要修正,甚至代码是错误的,不能工作 ...
- OpenERP的短信(SMS)接口
今天测试了一下OpenERP的短信(SMS)接口. 在OpenERP的Partner界面上,WebClient的右边的工具条有个“send sms”的按钮.OpenERP中发短信用的是短信的Web接口 ...