<!-- 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. webbrowser控件——Windows下的开发利器

    首先说明,本人比较菜,做C++没多长时间. 刚开始用MFC写程序时,连个基本的字体都不会变(颜色.大小等), 索性干脆就啥也不改了,直接默认,界面就那样了,老子不管了. 心想这C++做个界面咋就那么麻 ...

  2. Oracle网络服务管理与配置

    一.Oracle网络服务概述 1.网络解决方案. (1)可连接性:在Oracle中,由Oracle net组件负责在客户端应用程序与数据服务器之间创建会话.维护会话连接和数据传输. (2)可管理性: ...

  3. Oracle数据库的启动与关闭

    一.概述: Oracle数据库的启动分为启动数据库实例.装载数据库和打开数据库3个过程,对应数据库的3种模式. 启动数据库实例:根据数据库初始化参数文件中参数设置,在内存中为数据库分配SGA.PGA等 ...

  4. 【HackerRank】 Chocolate Feast

    Little Bob loves chocolates, and goes to the store with $N money in his pocket. The price of each ch ...

  5. OpenCV图片拼接的两种方法

    https://my.oschina.net/xiaot99/blog/226589 一.原图 1.jpg                                        2.jpg   ...

  6. python的常用的内置函数

    使用内置函数的好处:简单,快速. 1.zip():以多个序列为参数,返回元祖列表. 长度:在多个序列长度不一时,以最短的为准. 常见用途:构建多参数列表,构建字典. 2.map():在python2旧 ...

  7. ResourceBundle和properties 读取配置文件区别

    java.util.ResourceBundle 和java.util.properties 读取配置文件区别 这两个类都是读取properties格式的文件的,而Properties同时还能用来写文 ...

  8. RHCE学习笔记 管理1 （第一、二章）

    第一章 命令行访问 1.Ctrl+alt+F2~F6 切到虚拟控制台,ctrl+alt+F1 回到图形界面 2.格式 : 命令 选项 参数 [] 为可选项目            ...表示该项目任意 ...

  9. 为什么原生的servlet是线程不安全的而Struts2是线程安全的？

    因为原生的servlet在整个application生命周期中,只在初次访问的时候实例化一次,以后都不会再实例化,只会调用Server方法进行响应,所以如果在servlet类中定义成员变量,那么就会让 ...

  10. 泛型学习第一天：List与IList的区别 （三）

    已经有很多人讨论过IList和List的区别,恩,我也赞同其中的一些观点,其实他们二者也是有优有劣的,看你着重用在哪个方面,先贴一下我赞同的意见,基本上也都是网友们总结的. 首先IList 泛型接口是 ...