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 复选框全选/取消全选/反选的更多相关文章

  1. CheckedListBoxControl 实现复选框的单选与多选功能

    由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...

  2. JQuery的复选框选中、取消、全选，全不选问题

    一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...

  3. jQuery实现checkbox（复选框）选中、全选反选代码

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  4. jQuery对复选框（checkbox)的全选，全不选，反选等的操作

    效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...

  5. 复选框（checkox）全选、全不选、反选、获得选中项值的用例

    HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...

  6. jquery 循环获取checkBox的值,以及对复选框选中，取消，操作按钮

    法一:jquery 循环获取选中checkBox框的值 function checkeds() { $("input:checkbox").each(function(index) ...

  7. 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面

    <%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...

  8. JavaScript实现单击全选 ,再次点击取消全选

                 以下为实现思路,已测试,供参考 var allSet = document.getElementById('allSet');//获取全选按钮元素 var a = allSe ...

  9. firefox(火狐)下 js中设置checkbox属性checked="checked"已有，但复选框却不显示勾选的原因

    刚看到问题时以为是浏览器兼容性的原因,ie.google都能正常显示. 网上查询之后发现是jQuery的attr()方法用的不恰当. jQuery1.6之前使用attr()可以修改 ,从jQuery ...

  10. jquery 实现 单选框点击取消

    <label for="1" class="z-label"> <input type="radio" class=&qu ...

随机推荐

  1. Python访问MySQL数据库

    #encoding: utf-8 import mysql.connector __author__ = 'Administrator' config={'host':'127.0.0.1',#默认1 ...

  2. 破解无线网络密码-BT3如何使用3

    BT3 虚拟机 SNOOPWEP2 破解无线网络WEP密钥图解 1.下载BT3 光盘映像文件(ISO格式),比如:bt3-final.iso: 用WinISO 或 UltraISO(这个还支持DVD ...

  3. MySQL user表简介

    mysql> DESC MYSQL.USER \G *************************** . row ***************************   Field:  ...

  4. OpenERP7.0中日期的问题

    在OpenERP7.0中载入中文语言后,输入某些单据,一些细化到时间的字段输入时会报错,说是日期格式不正确. 解决办法是进入[设置]-[翻译]-[语言]菜单,把时间格式中的值 %I:%M:%S %p ...

  5. Android C/C++ 开发

    标准的做法是 把 src 放到  /Android/develop/ 目录下去,然后建立 Android.mk 文件, 然后 make modue ...., 但是,这种方式 太麻烦. 下面介绍一种方 ...

  6. opencv在手机上实现照片背景虚化

    概述 使用androidstudio开发,在手机上实现照片背景虚化 详细 代码下载:http://www.demodashi.com/demo/10599.html 一.准备工作 1.需要下载安装an ...

  7. 捕获Chrome浏览器全屏退出事件

    参考地址 document.addEventListener("fullscreenchange", function(e) { console.log("fullscr ...

  8. HDUOJ--1159Common Subsequence

    Common Subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  9. Android学习系列(18)--App工程结构搭建

     本文算是一篇漫谈,谈一谈关于Android开发中工程初始化的时候如何在初期我们就能搭建一个好的架构.      关于android架构,因为手机的限制,目前我觉得也确实没什么大谈特谈的,但是从开发的 ...

  10. java MessageFormat.format

    sql 语句中格式化,如果加入{}占位符,要替代的是整形变量,而恰好这个整形变量的位数超过4位, MessageFormat.format 会在这个整形变量中默认每隔三位加一个逗号,类似这样:1000 ...