<!-- 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. HTML系列（3）基本的HTML标签（二）

        本节继续介绍HTML的常用标签.     (1)input标签之文本域(text和textarea).密码域(password): <!DOCTYPE html> <html ...

  2. imx6q Xorg下Qt应用开机自启动及添加桌面快捷启动图标的方法

    启动scene3d例子: root@imx6qsabresd:/etc/X11/Xsession.d# ls -altotal 36drwxr-xr-x 2 root root 4096 Mar 12 ...

  3. 【Head First Servlets and JSP】笔记12：URL重写

    1.会话管理的核心在于“交换会话ID”,来回传递cookie是最简单的方法,容器通过客户端发来的JSSESIONID查找匹配的对话. 2.如果浏览器禁用了cookie,那就意味着浏览器将忽略响应首部中 ...

  4. 关于pycharm中的requirements.txt文件

    作用:记录所有所依赖的第三方模块,方便迁移到不同的环境中后,防止缺少模块,或因为所依赖的第三方模块版本不同引起不必要的问题 生成命令:pip freeze > requirements.txt ...

  5. PHP常用函数的归纳

    //===============================时间日期=============================== //y返回年最后两位,Y年四位数,m月份数字,M月份英文.d月 ...

  6. Redis 高级实用特性

    1.安全性 设置客户端连接后进行任何其他操作前先验证密码. 因为Redis速度相当快,所以在一台比较好的服务器下,一个外部用户可以在一秒钟进行150K次的密码尝试,这意味着需要指定一个非常强大的密码来 ...

  7. 重用UITableViewCell对象的概念

    重用UITableViewCell对象 UITableView控件十分常见,基本上我们随意打开一款App都能见到,它被用来列表展示数据,而其中的每一行内容都是一个cell对象 我们知道手机设备上的内存 ...

  8. INSPIRED启示录 读书笔记 - 第31章 苹果公司给我的启示

    苹果公司值得学习的经验 1.硬件为软件服务:苹果公司明白硬件必须为软件服务,软件直接服务用户,满足用户需求.采用多点触控显示屏.重力加速器.距离传感器这些硬件技术是为了配合软件满足用户需求 2.软件为 ...

  9. HDU 1166 敌兵布阵 【线段树-点修改--计算区间和】

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  10. centos6 多段Ip添加脚本

    #!/bin/bash export device=`ifconfig|grep eth0|head -n 1|awk '{print ($1)}'`export ipcfg_pre="/e ...