<!-- author：青芒 -->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>多选/全选/反选 获取选中的值</title>

</head>

<body>

    <p>中国古代十大名剑</p>

    <input type="checkbox" value="全选" id="selectAll"/>全选

    <div id="checkBoxList" class="check-all">

        <input type="checkbox" value="轩辕"/>轩辕<br>

        <input type="checkbox" value="湛泸"/>湛泸<br>

        <input type="checkbox" value="赤霄"/>赤霄<br>

        <input type="checkbox" value="太阿"/>太阿<br>

        <input type="checkbox" value="七星龙渊"/>七星龙渊<br>

        <input type="checkbox" value="干将"/>干将<br>

        <input type="checkbox" value="莫邪"/>莫邪<br>

        <input type="checkbox" value="鱼肠"/>鱼肠<br>

        <input type="checkbox" value="纯钧"/>纯钧<br>

        <input type="checkbox" value="承影"/>承影<br>

    </div>  

    <button id="getCheckVal">获取选中的值</button>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <script>

        $(function(){

            $("#selectAll").click(function(){ //全选/反选

                var checkedFlag = this.checked;

                $("#checkBoxList :checkbox").prop("checked", checkedFlag);

            }); 

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

                var length1 = $("#checkBoxList :checkbox").length; //选项个数

                var length2 = $("#checkBoxList :checkbox").filter(":checked").length; //已勾选的个数

                if(length1 === length2){

                    $("#selectAll").prop("checked", true);

                }else{

                    $("#selectAll").prop("checked", false);

                }

            });

            $("#getCheckVal").click(function(){ //获取选中的值

                $("#checkBoxList input:checkbox:checked").each(function(){

                    console.log($(this).val());

                })

            })

        })

    </script>

</body>

</html>

基于JQ的多选/全选/反选及获取选中的值的更多相关文章

  1. jQuery 实现复选框全选、反选及获取选中的值

    实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...

  2. jquery实现全选、全不选、反选、获取选中的所有值总结

    HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. <!doctype html> <html> <head& ...

  3. Dynamic CRM 2013学习笔记（二十六）报表设计：Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色

    上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...

  4. JQuery 更改属性 JQ对象循环 each 全选反选 三元运算

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

  5. 复选框（checkox）全选、全不选、反选、获得选中项值的用例

    HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...

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

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

  7. UITableView多选全选

    自定义cell和取到相应的cell就行了 TableViewCell.h #import <UIKit/UIKit.h> @interface TableViewCell : UITabl ...

  8. Jquery 多选全选/取消 选项卡切换 获取选中的值

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

  9. vue-element 动态单选多选全选

    实现效果如图 数据格式如下: pps: [{"code":"6","createTime":"2018-09-07 00:00:0 ...

随机推荐

  1. window端口号被占用解决

    1. 找到占用该端口的pid netstat -ano|findstr "端口号" 2. 强制关闭该占用该端口的进程 // 关闭 taskkill -pid 刚才查的pid // ...

  2. mongodb php 支持

    http://bbs.csdn.net/topics/391931404?page=1 windows下为php7.0.4安装目前官方版本对应的最新的php_mongodb.dll扩展,该扩展版本为1 ...

  3. Python编程-编码、文件处理、函数

    一.字符编码补充知识点 1.文本编辑器存取文件的原理(nodepad++,pycharm,word) 打开编辑器就打开了启动了一个进程,是在内存中的,所以在编辑器编写的内容也都是存放与内存中的,断电后 ...

  4. [POI2008]账本BBB

    题目 BZOJ 做法 明确: \(~~~1.\)为了达到目标分数所取反的次数是固定的 \(~~~2.\)为了满足前缀非负,得增加取反和滚动次数 滚动的次数可以枚举,增加的取反可以通过最小前缀和得到 滚 ...

  5. 大话设计模式之PHP篇 - 单例模式

    在编写PHP代码的时候,经常使用new关键字实例化一个对象,比如 <?php Class Database { } $db = new Database; 这是最常规的实例化操作方法,像数据库操 ...

  6. 关于v4l2的一点变更

    先打个连接 http://linuxtv.org/downloads/presentations/media_ws_2013/v4l2-multi-format.pdf 2013年linux 多媒体构 ...

  7. Spring MVC 接收多个实体参数

    在SpringMVC 的接收参数中,如果接收一个实体对象,只需要在方法参数中这样做:@RequestBody User user //单个的时候这样接收 @RequestMapping(value = ...

  8. Servlet和Filter的url匹配以及url-pattern详解

    Servlet和filter是J2EE开发中常用的技术,使用方便,配置简单,老少皆宜.估计大多数朋友都是直接配置用,也没有关心过具体的细节,今天遇到一个问题,上网查了servlet的规范才发现,ser ...

  9. MYSQL 索引创建与使用

    可能用到索引的地方: where 子句,order by,group by 不需要创建索引的情况: 1. 表比较小 2.赋值有限的列(枚举),不要创建索引.创建的索引返回的行越少越好,此时区分度大. ...

  10. 大数据框架对比：Hadoop、Storm、Samza、Spark和Flink——flink支持SQL，待看

    简介 大数据是收集.整理.处理大容量数据集,并从中获得见解所需的非传统战略和技术的总称.虽然处理数据所需的计算能力或存储容量早已超过一台计算机的上限,但这种计算类型的普遍性.规模,以及价值在最近几年才 ...