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. 单页WEB应用（三），Chat聊天模块

    Chat 聊天模块 这个模块应该就是该书全篇的唯一一个模块吧,后面差点儿全部的篇章都环绕这个模块去实现的,只是就通过这一个模块的实现和上线,也能体现单页应用开发到公布上线的整个过程,毕竟后面的数据.通 ...

  2. ubuntu server 安装 question2answer 及 汉化包

    ubuntu server 安装 question2answer 及 汉化包 question2answer 是一个非常简洁方便的问答系统,可以用它快速的部署一个问答社区,提高在开发中的交流沟通效率: ...

  3. iOS后台播放音乐

    iOS实现在后台播放音乐 iOS4之后就支持后台播放音频了.只需下面两步就可以实现后台播放音频操作了. 1. 在Info.plist中,添加"Required background mode ...

  4. TQ2440 LCD试验失败经验教训

    试验环境:TQ2440开发板(配套TQ4.3寸屏) 试验参考书目:<ARM处理器裸机开发实战--机制而非策略>(以下简称<裸机开发实战>) <裸机开发实战>第13章 ...

  5. jquery局部打印插件使用

    基于jquery库的jquery.PrintArea.js插件源代码为: (function ($) { var printAreaCount = 0; $.fn.printArea = functi ...

  6. Java的代理模式（通过公共接口实现）

    代理模式的一种常见的实现方案是,定义一个接口或抽象类,并派生出目标子类,和代理子类.我们要操作的是目标子类里的方法,而很多时候,我们需要为目录子类中的方法增加额外的处理,如果增加日志功能.条件判断等, ...

  7. spring mvc上传、下载的实现

    下载 //下载 @RequestMapping(value="/download") public ResponseEntity<byte[]> download() ...

  8. mysql利用yum安装指定数据存放路径

    测试环境: Centos6.5.MySQL5.6.28 yum安装具有速度快,便捷关键是不用编译,编译时间太久了! 01.下载mysql https://mirrors.tuna.tsinghua.e ...

  9. 兼顾pc和移动端的textarea字数监控的实现方法

    概述 pc端移动端中文本框监控字数的功能的一种较为简单的实现,考虑到安卓和IOS输入法输入过程中是否触发keyup的差异.利用监听compositionstart判断是否开启了输入法.从而实现体验较为 ...

  10. （CF#257)B. Jzzhu and Sequences

    Jzzhu has invented a kind of sequences, they meet the following property: You are given x and y, ple ...