<!-- 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. Django组件 用户认证,form

    auth模块 在进行用户登陆验证的时候,如果是自己写代码,就必须要先查询数据库,看用户输入的用户名是否存在于数据库中: 如果用户存在于数据库中,然后再验证用户输入的密码,这样一来就要自己编写大量的代码 ...

  2. 《网络对抗》 逆向及Bof基础实践

    <网络对抗>-逆向及Bof基础实践 1 逆向及Bof基础实践说明 1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数, ...

  3. cocos2dx打飞机项目笔记七：各种回调：定时器schedule、普通回调callFunc、菜单回调menu_selector、事件回调event_selector

    各种回调函数的定义: typedef void (CCObject::*SEL_SCHEDULE)(float); typedef void (CCObject::*SEL_CallFunc)(); ...

  4. 前段时间说了AssetBundle打包，先设置AssetLabels,再执行打包，但是这样有个弊端就是所有设置了AssetLabels的资源都会打包，这次说说不设置AssetLabels，该如何打包AssetBundle

    BuildPipeline.BuildAssetBundles() 这个函数,有多个重载,一个不用AssetBundleBuild数组,一个需要,如果设置了AssetLabels,那么这时候是不需要的 ...

  5. Kubernetes busybox nslookup问题

    使用最新版本的busybox会出现nslookup提示无法解析的问题: Server: 10.96.0.10 Address: 10.96.0.10:53 ** server can't find k ...

  6. docker link

    什么是docker的link机制 同一个宿主机上的多个docker容器之间如果想进行通信,可以通过使用容器的ip地址来通信,也可以通过宿主机的ip加上容器暴露出的端口号来通信,前者会导致ip地址的硬编 ...

  7. mongodb 中 Aggregation 的管道和分片集合（ Pipeline and Sharded Collections）

    mongodb 中的aggretion 中,如果管道中存在一个与之相匹配的shard key ,那么这个管道只运行在与之相匹配的shard 中,在以前(3.2),pipeline 被分流,最后又由pr ...

  8. 图片的另一种展现—将后台图片编码直接展现为图片

    1.应用场景            开发过程中,遇到这样的需求:需要将服务器上的图片展现在页面上,但是图片所在服务器不是对外的,图片所在服务器与应用服务器也不在同一台机器上,这时候就需要在开发中先将图 ...

  9. web-view和wx.navigateback

    web-view 我们先来了解一下官方的东西 web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面.个人类型与海外类型的小程序暂不支持使用. 属性名 类型 默认值 说明 src ...

  10. CCNA 课程 六

    路由协议概述: 通过一种路由协议学习到了多个去往同一目标网络的路由,metric小的放入路由表中.metric一样,同时放进路由表. 通过多种路由协议学习到了去往同一目标网络的路由,路由协议管理距离小 ...