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. （LeetCode 41）First Missing Positive

    Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2,0] ...

  2. 封装scrollView 循环滚动，tableViewCell（连载） mvc

    封装 封装 封装 ... 封装的重要性太重要了 给大家在送点干货 从一个项目中抽取出来的.和大家一起分享 封装scrollView 循环滚动.tableViewCell(连载) 明天还会更新 tabl ...

  3. 修改字段结构之ArcGIS Diagrammer

    在ArcGIS中,修改字段名称.类似和物理顺序是一件不好办的事,特别是需要修改字段比较多的情况下.通常的做法是新建字段-字段计算器赋值-删除原有字段的方法来达到修改的目的.这里介绍另外一种方法. 现需 ...

  4. ubuntu server vsftpd 虚拟用户及目录

    ubuntu server vsftpd 虚拟用户及目录 一:需求场景: 在ubuntu server上开设一个虚拟网站,在网站目录建立一个ftp目录,允许用户通过ftp上传网站文件到网站目录: 同时 ...

  5. AutoResponder Reference

    Fiddler's AutoResponder tab allows you to return files from your local disk instead of transmitting ...

  6. 设置Treeview背景色的问题1

    有没有哪位兄弟在VB中使用sendmessage对TreeView改变背景色?我现在遇到一个问题,如果把linestyle设为1 的时候,展开节点的时候root部位会 有一个下拉的白色块,如果设为1  ...

  7. IDE、SATA、SCSI、SAS、FC、SSD硬盘类型介绍

    参考于:http://blog.csdn.net/tianlesoftware/article/details/6009110 目前所能见到的硬盘接口类型主要有IDE.SATA.SCSI.SAS.FC ...

  8. 浏览器 UA 判断

    export const inBrowser = typeof window !== 'undefined' export const inWeex = typeof WXEnvironment != ...

  9. html中文乱码问题的解决

    当我试着用html写代码的时候,发现直接保存的文件用浏览器打开时中文显示是乱码的,所以我找了一些解决方法,可是原因不太明白,所以我也就不解释了,能够自己找找原因,以下提供解决方法: 在写的html的第 ...

  10. window下rabbitmq的配置问题

    最近项目想用个MQ来做业务分离,看了市面上众多产品,最后选了rabbitmq,理由很简单,对window的支持很到位(其实是公司的系列产品都是.net的). 安装方法什么的就不说了,直接到官网下载双击 ...