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. 安装apache+php记录

    安装apache yum install httpd 修改apache配置文件,可以修改apache的默认端口号,根目录等 /etc/httpd/conf/httpd.conf 启动/重启apache ...

  2. Tomcat环境的搭建(web基础学习笔记一)

    一.下载和安装Tomcat服务器 下载Tomcat安装程序包:http://tomcat.apache.org/ 点击[Download]跳转到如下图所示的下载页面 二.点击左侧要下载的版本,选择To ...

  3. jQuery之前端国际化jQuery.i18n.properties[转]

    http://www.ibm.com/developerworks/cn/web/1305_hezj_jqueryi18n/ jQuery.i18n.properties是一款轻量级的jQuery国际 ...

  4. Hotaru&#39;s problem（hdu5371+Manacher）多校7

    Hotaru's problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  5. Tomcat 错误代号集

    收集了一些常见的tomcat 错误代号以及附上状态代码  状态信息  含义.希望对大家有帮助. 状态代码  状态信息  含义100  Continue  初始的请求已经接受,客户应当继续发送请求的其余 ...

  6. linux修改 时间 时区

    linux系统修改系统时间与时区 | 浏览:3486 | 更新:2014-06-18 19:36 1 2 3 4 5 6 7 分步阅读 有装过Linux系统的人,可能都会有这样的经历,就是该机器安装w ...

  7. ELK日志分析平台搭建全过程

    一.使用背景 当生产环境有很多服务器.很多业务模块的日志需要每时每刻查看时 二.环境 系统:centos 6.5 JDK:1.8 Elasticsearch-5.0.0 Logstash-5.0.0 ...

  8. Androidmanifest.xml在Android项目中的作用

    以下是一个项目中的AndroidManifest.xml文件: <?xml version="1.0" encoding="utf-8"?> < ...

  9. 一个PHP操作大变量的例子

    By C extensions we can directly manipulate the large PHP variables, such as:GET,POST,SERVER You can ...

  10. tomcat占用cpu过高解决办法

    在工作中经常遇到tomcat占用cpu居高不下,针对这种情况有以下处理办法进行排查. jps --> 查看java的进程 top -Hp pid --> 根据jps得到的进程号(pid), ...