祖传代码的存在,这个项目自我进公司以来,就一直在改写加上维护,没有什么太厉害的技术,据说在我进公司之前,是经过两个Java后台来编写遗留下来的代码,公司觉得若是重新搭建框架过于费力,于是一直沿用至今,随着功能的越来越多,维护起来也是相当的费脑,每次修改的时候,我都会将某个部分的功能记录下来,写在自己的技术博客里面,以防混淆。
<!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>
原文作者:祈澈姑娘技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。