<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<meta charset='utf-8'/>

<head>

    <title>全选，不全选，反选</title>

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

</head>

<body>

<ul id="list">

   <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>

   <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>

   <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>

   <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li>

   <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li>

   <li><label><input type="checkbox" value="6"> 6.喜欢妳</label></li>

</ul>

<input type="checkbox" id="all">

<input type="button" value="全选" class="btn" id="selectAll">

<input type="button" value="全不选" class="btn" id="unSelect">

<input type="button" value="反选" class="btn" id="reverse">

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

</body>

<script type="text/javascript">

$(document).ready(function(){

    //全选或全不选

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

        if(this.checked){

            $("input[type=checkbox]").prop("checked",true);

        }else{

            $("input[type=checkbox]").prop("checked",false);

        }

     });

    //全选

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

         $("#list :checkbox,#all").prop("checked", true);

    });

    //全不选

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

         $("#list :checkbox,#all").prop("checked", false);

    });

    //反选

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

         $("#list :checkbox").each(function () {

              $(this).prop("checked", !$(this).prop("checked"));

         });

         allchk();

    }); 

    //设置全选复选框

    $("#list :checkbox").click(function(){

        allchk();

    }); 

    //获取选中选项的值

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

		str = '';

		n = '';

        $("#list :checkbox").each(function(){

			if(this.checked){

				str = str + n + $(this).val();

				n = ',';

			}

        });

		alert(str);

    }); 

})

function allchk(){

    var chknum = $("#list :checkbox").size();//选项总个数

    var chk = 0;

    $("#list :checkbox").each(function () {

        if($(this).attr("checked")==true){

            chk++;

        }

    });

    if(chknum==chk){//全选

        $("#all").attr("checked",true);

    }else{//不全选

        $("#all").attr("checked",false);

    }

}

</script>

</html>

jquery全选,全不选,反选,获取选择框的值的更多相关文章

  1. js/jquery获取文本框的值与改变文本框的值

    我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...

  2. jquery attr()方法 添加，修改，获取对象的属性值。

    jquery attr()方法 添加,修改,获取对象的属性值. jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到 ...

  3. jquery设置文本框值 与获取文本框的值

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

  4. jquery 如何获取单选框的值

    jquery 如何获取单选框的值   获取单选框的值有三种方式: 1.$('input:radio:checked').val():2.$("input[type='radio']:chec ...

  5. React-Native获取文本框的值

    要想获取文本框的值,首先我们需要看一下官方文档的解释: 这里的意思是说当文本框的内容改变的时候,文本框的输入的内容就会作为一个参数进行传递.因此我们就可以获取到文本框里面的内容就好了. constru ...

  6. js获取单选框的值

    js获取单选框的值 var lx= $("input[name='lx']:checked").val();

  7. HTML--JS 获取选择框信息

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

  8. php如何获取单选复选和选择框的值

    1.很久没有写基础的东西了复习一下(往往简单的东西才复杂) <body> 选择语句 <form action="demo.php" method="po ...

  9. select2 智能补全模糊查询select2的下拉选择框使用

    我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录select2的使用. 应用bootstrap模板 基础项目源码下载地址为: SpringMV ...

  10. jQuery name属性与checked属性结合获取表单元素值

    var paytype = $("input[name='paytype']:checked").val(); alert(paytype); input元素下名称为paytype ...

随机推荐

  1. BubbleSort，冒泡排序，C++非递归和递归实现

    1 // g++ bubble_sort.cc -Wall -O3 && ./a.exe 2 3 4 #include <iostream> 5 #include < ...

  2. 后端返回字符流，前端处理进行excel文件导出操作

    针对于这种的文件导出,最关键的是响应类型的设置,也就是responseType的设置(responseType:"arraybuffer"或者responseType:" ...

  3. JavaScript基础学习之二

    目录 JavaScript HTML DOM事件 事件触发1 事件触发2 addEventListener() 事件冒泡或事件捕获? 事件委托 removeEventListener() 方法 事件对 ...

  4. hi,docker,docker的介绍

    一.docker的介绍 1.什么是docker: docker是一种虚拟化技术,小型的系统环境(linux)2.虚拟化技术: 在计算机中用例管理虚拟资源的一种手段 内存管理.软件虚拟化.硬件虚拟化(磁 ...

  5. RAID 磁盘阵列 RAID0,RAID1,RAID5,RAID10 软RAID创建以及数据恢复

     软raid 做 raid 0   raid 1 raid 5  冗余备份以及数据恢复测试 如果 raid1 磁盘中有一块磁盘损坏,sdi1磁盘会补充上去  RAID 10 创建和使用 1.进行格式话 ...

  6. canal对接阿里云kafka

    一.前提条件 已经有mysql实例 自建或者云上都可以 已经在阿里云的kakfa创建topic 默认不自动创建topic 二.配置要监控的instance 先修改example的配置文件 conf/e ...

  7. 集群与iptables

    Iptables 五链四表执行关系如图所示,容器环境最常用的就是filter和nat表 加上各种自定义的链插入到各个环节,拦截流量做各种控制 filter表:匹配数据包以进行过滤 nat表:修改数据包 ...

  8. layui tree 未命名 所遇到的坑

    由于传入类型不对,需要传入object类型,我传入的是String类型,所以出现了 一堆未命名, 在控制台输出查看,是一模一样的,困扰了我一下午,再次感谢老哥 参考自:https://www.cnbl ...

  9. spring事务不生效8种原因

    1.数据库引擎不支持事务 这里以 MySQL 为例,其 MyISAM 引擎是不支持事务操作的,InnoDB 才是支持事务的引擎,一般要支持事务都会使用 InnoDB. 根据 MySQL 的官方文档: ...

  10. (转载)Python 浅析线程（threading模块）和进程（process）

    线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务 进程与线程 什么 ...