<!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>