整个代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" href="../css/bootstrap.css" /> <style> .paixu { cursor: pointer; } .orgtians { display: flex; align-items: center; justify-content: space-between; } #orgname { width: 270px; height: 50px; border: 1px solid #e1e1e1; } .orgnumbs, .orghznumbs { width: 100%; height: 300px; margin-top: 20px; overflow-y: auto; } .orgbox { display: flex; flex-wrap: wrap; } .orgbox .firstBtn { width: 145px; height: 80px; margin: 5px 3px; position: relative; display: flex; align-items: center; justify-content: center; color: #6498f0; border: 1px solid #e1e1e1; cursor: pointer; } .bg_color { color: #00a09d !important; border: 1px solid #00a09d !important; } .st_color { color: #6498f0; border: 1px solid #e1e1e1; } .orgbox .firstBtn:hover { color: #00a09e; border: 1px solid #00a09e; } .orgspans { width: 29px; height: 29px; position: absolute; top: -6px; right: -4px; background-image: url(../images/yes.png); } /*全选的样式*/ .agree { position: fixed; top: 60%; left: 0; width: 50%; text-align: center; line-height: 1.5rem; background: white; } .agree p { display: inline-block; display: inline-block; padding-top: 20px; padding-right: 8px; cursor: pointer; } .agree p:before { content: ""; position: absolute; width: 27px; height: 27px; top: 50%; left: 31.5%; margin-top: -0.7rem; border: 0.1rem solid #e1e1e1; } .agree.on p:after { content: ""; position: absolute; width: 10px; height: 15px; top: 55%; border-top: 0.15rem solid #00a09e; border-left: 0.15rem solid #00a09e; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); transform: rotate(225deg); left: 33%; margin-top: -0.62rem; } </style> <body> <div class="modal-content" style=' 642px;'> <div class="modal-body"> <form class="form-inline"> <div class='orgtians'> <select id='orgname'> <option value='0'>儿科</option> <option value='1'>妇科</option> <option value='1'>耳鼻喉科</option> </select> <p class='paixu'>职称排序 <img src='../framework/images/paixu.png'></p> </div> <div class="orgnumbs"> <div class='orgbox'> <p class="firstBtn">医生姓名<span></span></p> <p class="firstBtn">医生姓名<span></span></p> <p class="firstBtn">医生姓名<span></span></p> <p class="firstBtn">医生姓名<span></span></p> </div> </div> <div class="modal-footer agree " style="text-align:center;"> <p id="iAgree" class="red">全选</p> <button id='add' type="button" onclick='addCall()' class="btn btn-primary">添 加</button> <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button> </div> </form> </div> </div> </body> </html> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <script> //全选事件 function events() { $("#iAgree").click(function() { $(".agree").toggleClass("on"); if($(".agree").hasClass('on')) { $('.orgbox .firstBtn').addClass('bg_color'); $('.orgbox .firstBtn span').addClass('orgspans'); } else { $('.orgbox .firstBtn').removeClass('bg_color'); $('.orgbox .firstBtn span').removeClass('orgspans'); } }); } events() //选择多个再次点击还原样式 $(".orgbox").delegate(".firstBtn", "click", function(e) { e.stopPropagation(); var timeDivs = $('.orgbox .firstBtn'); var timeSpan = $('.orgbox .firstBtn span'); for(var i = 0; i < timeDivs.length; i++) { if($(this).is(timeDivs[i])) { $(timeDivs[i]).toggleClass('bg_color'); $(timeSpan[i]).toggleClass('orgspans'); } } }); //只能选择一个其他还原样式 /*$(".orgbox").delegate(".firstBtn", "click", function(e) { e.stopPropagation(); var timeDivs = $('.orgbox .firstBtn'); var timeSpan = $('.orgbox .firstBtn span'); for(var i = 0; i < timeDivs.length; i++) { if($(this).is(timeDivs[i])) { $(timeDivs[i]).addClass('bg_color'); $(timeSpan[i]).addClass('orgspans'); }else{ $(timeDivs[i]).removeClass('bg_color'); $(timeSpan[i]).removeClass('orgspans'); } } });*/ </script>