举了7个不同的checkbox状态，和大家一一分享。

1、全选

$("#btn1").click(function(){

$("input[name='checkbox']").attr("checked","true");

})

2、取消全选（全不选）

$("#btn2").click(function(){

$("input[name='checkbox']").removeAttr("checked");

})

3、选中所有奇数

$("#btn3").click(function(){

$("input[name='checkbox']:odd").attr("checked","true");

})

4、选中所有偶数

$("#btn6").click(function(){

$("input[name='checkbox']:even").attr("checked","true");

})

5、反选

$("#btn4").click(function(){

$("input[name='checkbox']").each(function(){

if($(this).attr("checked"))

{

$(this).removeAttr("checked");

}

else

{

$(this).attr("checked","true");

}

})

})

或者

$("#invert").click(function(){

  $("#ruleMessage [name='delModuleID']:checkbox").each(function(i,o){

   $(o).attr("checked",!$(o).attr("checked"));

  });

 });

6、获取选择项的值

var aa="";

$("#btn5").click(function(){

$("input[name='checkbox']:checkbox:checked").each(function(){

aa+=$(this).val()

})

document.write(aa);

})

})

7、遍历选中项

$("input[type=checkbox][checked]").each(function(){

 //由于复选框一般选中的是多个,所以可以循环输出

 alert($(this).val());

});

下面实例讲述了jquery实现全选、反选、获得所有选中的checkbox。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>无标题页</title>

<script src="js/jquery-1.6.min.js" type="text/javascript"></script>

<script type="text/javascript">

jQuery(function($){

//全选

$("#btn1").click(function(){

$("input[name='checkbox']").attr("checked","true");

})

//取消全选

$("#btn2").click(function(){

$("input[name='checkbox']").removeAttr("checked");

})

//选中所有基数

$("#btn3").click(function(){

$("input[name='checkbox']:even").attr("checked","true");

})

//选中所有偶数

$("#btn6").click(function(){

$("input[name='checkbox']:odd").attr("checked","true");

})

//反选

$("#btn4").click(function(){

$("input[name='checkbox']").each(function(){

if($(this).attr("checked"))

{

$(this).removeAttr("checked");

}

else

{

$(this).attr("checked","true");

}

})

})

//或许选择项的值

var aa="";

$("#btn5").click(function(){

$("input[name='checkbox']:checkbox:checked").each(function(){

aa+=$(this).val()

})

document.write(aa);

})

})

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<input type="button" id="btn1" value="全选">

<input type="button" id="btn2" value="取消全选">

<input type="button" id="btn3" value="选中所有奇数">

<input type="button" id="btn6" value="选中所有偶数">

<input type="button" id="btn4" value="反选">

<input type="button" id="btn5" value="获得选中的所有值">

<br>

<input type="checkbox" name="checkbox" value="checkbox1">

checkbox1

<input type="checkbox" name="checkbox" value="checkbox2">

checkbox2

<input type="checkbox" name="checkbox" value="checkbox3">

checkbox3

<input type="checkbox" name="checkbox" value="checkbox4">

checkbox4

<input type="checkbox" name="checkbox" value="checkbox5">

checkbox5

<input type="checkbox" name="checkbox" value="checkbox6">

checkbox6

<input type="checkbox" name="checkbox" value="checkbox7">

checkbox7

<input type="checkbox" name="checkbox" value="checkbox8">

checkbox8

</div>

</form>

</body>

</html>

（转载）jquery实现全选、反选、获得所有选中的checkbox的更多相关文章

  1. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  2. jquery 书写全选反选功能

    书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. jquery实现全选/反选功能

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  4. jQuery实现全选/反选和批量删除

    <%@ page language="java" contentType="text/html; charset=utf-8"     pageEncod ...

  5. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. ----Juquery复选框全选反选及获取选中值Value

    --获取选中值 var pList = ""; $("[name='ckdProd']").each(function () { if ($(this).is( ...

  7. jQuery实现全选反选功能

    废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="tex ...

  8. jquery 实现全选反选

    jquery代码 $(function () { $('#inputCheck').click(function () { if ($(this).attr("checked")) ...

  9. jquery实现全选 反选 取消

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 为什么mysql要做主从复制？

    为什么MySQL要做主从复制(读写分离)? 通俗来讲,如果对数据库的读和写都在同一个数据库服务器中操作,业务系统性能会降低. 为了提升业务系统性能,优化用户体验,可以通过做主从复制(读写分离)来减轻主 ...

  2. caioj 1172 poj 2823 单调队列过渡题

    给定一个n个数的数列,从左至右输出每个长度为m的数列段内的最大数. 输入:第一行两个整数n和m( 1<= n <= 20 0000,m<=n).下来给出n个整数. 输出:一行一个整数 ...

  3. idea html热部署

    IDEA SpringBoot 热部署+html修改无需make自动刷新 收藏 HeyS1 发表于 3个月前 阅读 310 收藏 2 点赞 0 评论 0 特邀IBM大咖的主题沙龙,5月20日·北京·3 ...

  4. 3、Django下载与简介

    第1节:MVC与MTV模型 1.1 MVC Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一 ...

  5. python统计磁盘使用情况

    #coding:utf-8import os; def SortList(item):    return item[1]; def ReadSize(fileName):    return flo ...

  6. HDU 5550 - Game Rooms（DP + 前缀和预处理）

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=5550 题意: 一个大楼有n(2≤n≤4000)层,每层可以建一个乒乓球房或者一个游泳房,且每种房间在大楼 ...

  7. JDBC通过配置文件（properites）读取数据库配置信息

    扫盲: Classloader 类加载器,用来加载 Java 类到 Java 虚拟机中.与普通程序不同的是.Java程序(class文件)并不是本地的可执行程序.当运行Java程序时,首先运行JVM( ...

  8. 创建一个接口Shape，其中有抽象方法area，类Circle 、Rectangle实现area方法计算其面积并返回。又有Star实现Shape的area方法，其返回值是0，Star类另有一返回值boolean型方法isStar；在main方法里创建一个Vector，根据随机数的不同向其中加入Shape的不同子类对象（如是1，生成Circle对象；如是2，生成Rectangle对象；如是3，生成S

    题目补充: 创建一个接口Shape,其中有抽象方法area,类Circle .Rectangle实现area方法计算其面积并返回. 又有Star实现Shape的area方法,其返回值是0,Star类另 ...

  9. PAT乙级1023

    1023 组个最小数 (20 分)   给定数字 0-9 各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意 0 不能做首位).例如:给定两个 0,两个 1, ...

  10. Lucene-----信息检索技术

    1 信息检索概述 1.1 传统检索方式的缺点     • 文件检索        操作系统常见的是硬盘文件检索        文档检索:整个文档打开时已经加载到内存了;        缺点:全盘遍历, ...