全选或者单选checkbox的值动态添加到div

图片.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的更多相关文章

JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
input全选与单选(把相应的value放入隐藏域去)
框架是Jquery 需求是: 页面上有很多复选框,1.当我选择一项复选框时候把对应的值放入到隐藏域去 2.当我反选的时候把隐藏域对应的值删掉.3.当我全选的时候页面上所有的选择框的值一起放到隐藏 ...
jq pagination分页全选、单选的思考
$().pagination(总条数,配置项); 后端分页的跨页选择: 思路:把浏览过的页整体保存为,整体拥有 curPage(当前页码).allChoice(当前页是否全选).selected当前页 ...
Jquery全选与反选checkbox（代码示例）
今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...
优秀前端工程师必备: 非常常用的checkbox的骚操作---全选和单选demo
提要: 前端开发的时候, 经常会遇到表格勾选, 单个勾选判断是否全选的事情.趁着有时间, 总结一下以备不时之需! 就像下面这个栗子: 1 源代码: h5 // 全选框 <input type=& ...
DataTable添加checkbox实现表格数据全选，单选（点选）
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 分页,即时搜索和排序几乎支持任何数据源:DOM, javascript, Ajax ...
jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效
好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门 ...
微信小程序获取复选框全选，反选选中的值
wxml文件 <view class="tr"> <view class="th"> <checkbox bindtap=&quo ...
vue分页全选和单选操作
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li ...

随机推荐

nagios插件之登陆防火墙实现session监控
ssh_firewall_session.sh -- 登陆防火墙并运行dis session statistics firewall_check_sessions.c -- 调用上面脚本.过滤出ses ...
js---11闭包
//匿名立即调用函数 (function(){//把a,b,f全部隐藏在函数中,外部访问不到, var a = 5; var b = 6; function f(){ alert(a); } wind ...
js插件---评分插件Rating如何使用
js插件---评分插件Rating如何使用一.总结一句话总结:form下的input和a标签,input记录值,a标签显示样式 12 <form data-am-rating> 13 ...
通过js动态创建button
通过js动态创建button 一.实例描述通过JS的DOM对象,实现元素的动态创建. 二.效果三.代码 <!DOCTYPE html> <html lang="zh-c ...
Kinect 开发 —— 深度信息
转自:http://www.cnblogs.com/yangecnu/archive/2012/04/04/KinectSDK_Depth_Image_Processing_Part1.html 深度 ...
iptables-save && iptables-restore iptables规则保存于还原
iptables-save命令用于将linux内核中的iptables表导出到标准输出设备商,通常,使用shell中I/O重定向功能将其输出保存到指定文件中. 语法 -t:指定要保存的表的名称. 实例 ...
Android屏幕分辨率获取方法--源码剖析
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 在适配的过程中,有时我们会用到屏幕宽高,那么如何获得屏幕的分辨率? 方法有两种: 第一种是通过Win ...
ELK+KAFKA安装部署指南
一.ELK 背景通常,日志被分散的储存不同的设备上.如果你管理数十上百台服务器,你还在使用依次登录每台机器的传统方法查阅日志.这样是不是感觉很繁琐和效率低下.当务之急我们使用集中化的日志管理,例如: ...
Summary Day32
1 . 文件管理 1.1 标C文件处理和UC文件处理函数的比較: 标C文件处理函数比UC的文件处理函数速度快.由于标C内部独立输入输出缓冲区, 会积累一定数量之后再写入文件,因此读写效率比較高使用t ...
js04---object1
我们目前为止大多数引用类型都是Object类型的实例,Object也是ECMAScript中使用最多的一种类型(就像java.lang.Object一样,Object类型是所有它的实例的基础).Obj ...

全选或者单选checkbox的值动态添加到div

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

随机推荐

热门专题