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