jQuery点击checkbox选择标签到指定的位置

王小婷

发布于 2018-10-25 14:55:31

2.2K0

发布于 2018-10-25 14:55:31

文章被收录于专栏：编程微刊

写在前面的话

祖传代码的存在，这个项目自我进公司以来，就一直在改写加上维护，没有什么太厉害的技术，据说在我进公司之前，是经过两个Java后台来编写遗留下来的代码，公司觉得若是重新搭建框架过于费力，于是一直沿用至今，随着功能的越来越多，维护起来也是相当的费脑，每次修改的时候，我都会将某个部分的功能记录下来，写在自己的技术博客里面，以防混淆。

实现效果：

参考链接：https://cloud.tencent.com/developer/article/1142683

写了个demo

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.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="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.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>