举了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. 安全紧急预警-防范新型 Sigrun 勒索病毒

    近日,互联网上出现一种 Sigrun 勒索病毒,其通过垃 圾邮件.网站捆绑软件等方式进行传播.该病毒一旦植入到 用户的服务器,将把系统文件加密为.sigrun 的文件,进而 向受害者勒索虚拟货币.该新 ...

  2. September 11th 2017 Week 37th Monday

    I believe there is a hero in all of us. 我相信每个人心中都住着一个英雄. For every of us, there are two version with ...

  3. 【错误记录】flask mysql 死锁

    最近使用flask-sqlalchemy时,进行测试的时候发现日志中打印出了MySql死锁错误,查看Mysql日志发现是因为有俩条sql出现了死锁: Deadlock found when tryin ...

  4. kukubeadm 1.6.1 + docker1.2.6 安装问题

    kubeadm init --apiserver-advertise-address=192.168.20.229 --pod-network-cidr=10.244.0.0/16 kubelet: ...

  5. 也谈SpringCloud：假如 《复仇者联盟4》是一个微服务

    前言   <复仇者联盟4>(下文<妇联4>) 将于4月24号上映了,漫威迷们是不是迫不及待了.我虽然不是漫威迷,没有看过相关漫画,但是电影确实一步都不落.不过我在想一个问题:假 ...

  6. Data Binding Android - Type parameter T has incompatible upper bounds : ViewDataBinding and MainAct

    Go to your "some_layout.xml" Click right -> Refactor -> Rename (or SHIFT + F6) Renam ...

  7. zookeeper 集群安装与配置

    Zookeeper安装和配置 准备工作 安装 JDK,此步略. 下载 zookeeper wget http://archive.apache.org/dist/zookeeper/zookeeper ...

  8. selenium 无界面跑UI脚本

    from selenium.webdriver.chrome.options import Options from selenium import webdriver import time chr ...

  9. PAT乙级1017

    1017 A除以B (20 分)   本题要求计算 A/B,其中 A 是不超过 1000 位的正整数,B 是 1 位正整数.你需要输出商数 Q 和余数 R,使得 A=B×Q+R 成立. 输入格式: 输 ...

  10. P1736 创意吃鱼法

    题目描述 回到家中的猫猫把三桶鱼全部转移到了她那长方形大池子中,然后开始思考:到底要以何种方法吃鱼呢(猫猫就是这么可爱,吃鱼也要想好吃法 ^_*).她发现,把大池子视为01矩阵(0表示对应位置无鱼,1 ...