图片.png
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" href="./css/bootstrap.css" />

        <style>

            html,body{

                width:100%

            }

            .bg_gray{

                background-color: #F1F1F1;

                font-size:14px;

                height:28px;

                line-height: 28px;

            }

            .container{

                width:500px;

                border: 1px solid #000;

            }

            .lead{

                border: 1px solid #f1f1f1;

                height:40px;

                margin-top:10px;

            }

            .breadcrumb{

                background-color: #fff;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <div class="row bg_gray">

                <div class="col-xs-6">

                    选择部门

                </div>

                <div class="col-xs-6 text-right">×</div>

            </div>

            <p class="lead">

            </p>

            <div class="row">

                <ol class="breadcrumb">

                  <li><a href="#">华东师范大学>经管学部</a></li>

                </ol>

            </div>

            <ul class="list-group">

                <li class="list-group-item">

                    <div class="row">

                        <div class="col-xs-6">

                            <input type="checkbox" name="check_all" />全选

                        </div>

                        <div class="col-xs-6 text-right">

                            5>

                        </div>

                    </div>

                </li>

                <li class="list-group-item">

                    <div class="row">

                        <div class="col-xs-5 col-xs-offset-1">

                            <input type="checkbox" name="check" onclick="getCheck()"/>经济学院

                            </div>

                        <div class="col-xs-6 text-right">

                            5>

                        </div>

                </li>

                <li class="list-group-item">

                    <div class="row">

                        <div class="col-xs-5 col-xs-offset-1">

                    <input type="checkbox" name="check" onclick="getCheck()"/>MBA教育学院

                    </div>

                        <div class="col-xs-6 text-right">

                            5>

                        </div>

                </li>

            </ul>

            <div class="row">

                <div class="col-xs-6 text-center">

                    <button class="btn btn-default btn-lg">取消</button>

                </div>

                <div class="col-xs-6 text-center">

                    <button class="btn btn-info btn-lg">确定</button>

                </div>

            </div>

        </div>

    </body>

    <script src="js/jquery.js"></script>

    <script>

        $("[name=check]").on("change",function(){

            var vl = $.trim($(this).parent().text())

            var val = $('<button type="button" class="btn btn-info btn-sm">'+vl+'</button>')

            if($(this).is(":checked")){

                if($("button:contains("+vl+")").length==0){

                    $(".lead").append(val)

                }

            }else{

                $("button:contains("+vl+")").remove()

            }

        })

        $("[name=check_all]").on("change",function(){

            if($(this).is(":checked")){

                $.map($("[name=check]"),function(val,index){

                    $(val).attr("checked","checked")

                    $("[name=check]").eq(index).trigger("change")

                })

            }else{

                $.map($("[name=check]"),function(val,index){

                    $(val).removeAttr("checked")

                    $("[name=check]").eq(index).trigger("change")

                })

            }

        })

        function getCheck(){

            var flag=1;

            $.map($("[name=check]"),function(val,index){

                    if(!$(val).is(":checked")){

                        flag=0;

                    }

                })

            if(!flag){

                $("[name=check_all]").removeAttr("checked")

            }else{

                $("[name=check_all]").attr("checked","checked")

            }

        }

    </script>

</html>

原文作者：祈澈姑娘

技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，爱折腾。

坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

文末福利：关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。公众号回复“1”，拉你进程序员技术讨论群

全选或者单选checkbox的值动态添加到div的更多相关文章

  1. JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值

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

  2. input全选与单选(把相应的value放入隐藏域去)

    框架是Jquery 需求是: 页面上有很多复选框,1.当我选择一项复选框时候 把对应的值放入到隐藏域去 2.当我反选的时候 把隐藏域对应的值删掉.3.当我全选的时候 页面上所有的选择框的值一起放到隐藏 ...

  3. jq pagination分页 全选、单选的思考

    $().pagination(总条数,配置项); 后端分页的跨页选择: 思路:把浏览过的页整体保存为,整体拥有 curPage(当前页码).allChoice(当前页是否全选).selected当前页 ...

  4. Jquery全选与反选checkbox（代码示例）

    今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...

  5. 优秀前端工程师必备: 非常常用的checkbox的骚操作---全选和单选demo

    提要: 前端开发的时候, 经常会遇到表格勾选, 单个勾选判断是否全选的事情.趁着有时间, 总结一下以备不时之需! 就像下面这个栗子: 1 源代码: h5 // 全选框 <input type=& ...

  6. DataTable添加checkbox实现表格数据全选，单选（点选）

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax ...

  7. jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效

    好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门 ...

  8. 微信小程序获取复选框全选，反选选中的值

    wxml文件 <view class="tr"> <view class="th"> <checkbox bindtap=&quo ...

  9. vue分页全选和单选操作

    <!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li ...

随机推荐

  1. Alcatraz：管理Xcode插件

    简单介绍 Alcatraz是一个帮你管理Xcode插件.模版以及颜色配置的工具. 它能够直接集成到Xcode的图形界面中,让你感觉就像在使用Xcode自带的功能一样. 安装和删除 使用例如以下的命令行 ...

  2. ios in-house 公布整个过程（startssl认证）

    首先大体说一下步骤: 1.申请苹果enterprise 账号 为应用生成app id,provision profile等 详见:http://www.th7.cn/Program/IOS/20131 ...

  3. DB2物化视图(Materialized Query Tables, MQT)

    DB2的物化视图MQT是基于查询结果定义的一个表,MQT中包括的数据来自MQT定义所基于的一个或多个表, 使用MQT能够显著提高查询的操作性能. 数据库的视图和MQT都是基于一个查询来定义的.每当视图 ...

  4. Windows下快速安装CACTI流量监控

    Windows下快速安装CACTI流量监控 原文  http://os.51cto.com/art/201111/300977.htm CACTI是一套PHP程序,它利用SNMPGET采集数据,使用R ...

  5. jquery08

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

  6. vim 基础学习之查找

    普通模式下 /->正向查找 n-向下查找 N-向上查找 ?->反向查找 N-向下查找 n-向上查找 <C-r><C-w> <C-r>-引用,例如引用寄存 ...

  7. private SortedDictionary<string, object> Dic_values = new SortedDictionary<string, object>();

    private SortedDictionary<string, object> Dic_values = new SortedDictionary<string, object&g ...

  8. 利用hibernateTemplate进行最简单的分页

    安全的方法例如以下.别用Session s=getSession()........ /**  * 使用hql 语句进行操作  * @param hql HSQL 查询语句  * @param off ...

  9. 68.qq号索引结构体写入内存,并实现快速排序

    //两个步骤,第一步读取文件,并且初始化索引结构体,把初始化的索引结构体写入到文件,第二步,读取这个文件到索引结构体 //并对这个结构体进行快速排序,得到顺序的索引,再写入文件 #define _CR ...

  10. 在Fedora 14 alpha 下测试Kvm情况(视频)

    今天刚忙完,便抽空做了fc14下的虚拟机的测试,总体感觉在2.6.35的kernel下启动和配置虚拟机的速度比原来要快乐许多,下面就带着各位体验一下吧.(硬件测试环境:IBM R52,2g内存,物理机 ...