全选或者单选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

最新文章

热门文章