單選+多選的篩選
阿新 • • 發佈：2019-01-04
在好多時候我們需要做一些篩選資料的功能，除了搜尋框直接搜尋外，還有哪些？今天，小妖同學要分享的一個篩選是長出現在購物網站上的，先來看看效果。
這是有著一行的單選+點選更多後的全部單選選項+多選的功能集合，當選中之後出現在已選擇的區域顯示，並做好分類，當叉掉後，對應類別重現。
程式碼對應效果下載地址：點選開啟連結
以下是它的實現程式碼
（1）HTML程式碼
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>篩選</title> <link rel="stylesheet" href="index.css" /> </head> <body> <div class="search"> <!--已選類別--> <div class="atp_choosed overflow"> <div class="left title col666">已選類別：</div> <div class="left conn" style="width: 780px;"></div> </div> <!--篩選內容(全部作者)--> <div class="scholars-recommend-content att-choose"> <div class="scholars-choose-box default-box"> <p class="choose-content left"> <em>全部作者</em> <span>學者姓名1（數量）</span> <span>學者姓名2（數量）</span> <span>學者姓名3（數量）</span> <span>學者姓名4（數量）</span> </p> <div class="scholars-choose-box scholars-choose-box2 left seemorebox"> <div class="title left">全部作者</div> <ul class="left"> <li>學者姓名1（數量）</li> <li>學者姓名2（數量）</li> <li>學者姓名3（數量）</li> <li>學者姓名4（數量）</li> <li>學者姓名5（數量）</li> <li>學者姓名6（數量）</li> <li>學者姓名7（數量）</li> <li>學者姓名8（數量）</li> <li>學者姓名9（數量）</li> </ul> </div> <button class="sch-moreChoose sch-getmore">更多</button> <button class="sch-moreChoose">+多選</button> </div> <div class="scholars-choose-box scholars-choose-box2 choosemorebox"> <form action=""> <div class="title left">全部作者</div> <ul class="left"> <li><input type="checkbox">學者姓名1（數量）</li> <li><input type="checkbox">學者姓名2（數量）</li> <li><input type="checkbox">學者姓名3（數量）</li> <li><input type="checkbox">學者姓名4（數量）</li> <li><input type="checkbox">學者姓名5（數量）</li> <li><input type="checkbox">學者姓名6（數量）</li> <li><input type="checkbox">學者姓名7（數量）</li> <li><input type="checkbox">學者姓名8（數量）</li> <li><input type="checkbox">學者姓名9（數量）</li> </ul> <div class="btns left"> <p><input type="button" class="sure" value="確定"></p> <p><input type="reset" class="false" value="取消"></p> </div> </form> </div> </div> <!--篩選內容(全部領域)--> <div class="scholars-recommend-content att-choose"> <div class="scholars-choose-box default-box"> <p class="choose-content left"> <em>全部領域</em> <span>學科領域1（數量）</span> <span>學科領域1（數量）</span> <span>學科領域1（數量）</span> <span>學科領域1（數量）</span> </p> <div class="scholars-choose-box scholars-choose-box2 left seemorebox"> <div class="title left">全部領域</div> <ul class="left"> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> <li>學科領域1（數量）</li> </ul> </div> <button class="sch-moreChoose sch-getmore">更多</button> <button class="sch-moreChoose">+多選</button> </div> <div class="scholars-choose-box scholars-choose-box2 choosemorebox"> <form action=""> <div class="title left">全部領域</div> <ul class="left"> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> <li><input type="checkbox">學科領域1（數量）</li> </ul> <div class="btns left"> <p><input type="button" class="sure" value="確定"></p> <p><input type="reset" class="false" value="取消"></p> </div> </form> </div> </div> <!--篩選內容(全部研究方向)--> <div class="scholars-recommend-content att-choose"> <div class="scholars-choose-box default-box"> <p class="choose-content left"> <em>全部研究方向</em> <span>研究方向1（數量）</span> <span>研究方向2（數量）</span> <span>研究方向3（數量）</span> <span>研究方向4（數量）</span> </p> <div class="scholars-choose-box scholars-choose-box2 left seemorebox"> <div class="title left">全部研究方向</div> <ul class="left"> <li>研究方向1（數量）</li> <li>研究方向2（數量）</li> <li>研究方向3（數量）</li> <li>研究方向4（數量）</li> <li>研究方向5（數量）</li> <li>研究方向6（數量）</li> <li>研究方向7（數量）</li> <li>研究方向8（數量）</li> <li>研究方向9（數量）</li> </ul> </div> <button class="sch-moreChoose sch-getmore">更多</button> <button class="sch-moreChoose">+多選</button> </div> <div class="scholars-choose-box scholars-choose-box2 choosemorebox"> <form action=""> <div class="title left">全部研究方向</div> <ul class="left"> <li><input type="checkbox">研究方向1（數量）</li> <li><input type="checkbox">研究方向2（數量）</li> <li><input type="checkbox">研究方向3（數量）</li> <li><input type="checkbox">研究方向4（數量）</li> <li><input type="checkbox">研究方向5（數量）</li> <li><input type="checkbox">研究方向6（數量）</li> <li><input type="checkbox">研究方向7（數量）</li> <li><input type="checkbox">研究方向8（數量）</li> <li><input type="checkbox">研究方向9（數量）</li> </ul> <div class="btns left"> <p><input type="button" class="sure" value="確定"></p> <p><input type="reset" class="false" value="取消"></p> </div> </form> </div> </div> </div> <script src="jquery-1.8.3.min.js"></script> <script src="index.js"></script> </body> </html>
（2）CSS
@charset "UTF-8"; html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 {font-weight: normal ;} article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; } ul, ol { list-style: none; padding:0;margin:0;} img { border: 0 none; vertical-align: top; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } table { border-collapse: collapse; border-spacing: 0; } strong, em, i { font-style: normal; font-weight: normal; } ins { text-decoration: underline; } del { text-decoration: line-through; } mark { background: none; } input::-ms-clear { display: none !important; } body { font: 14px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif; background: #fff; } a { text-decoration: none; color: #333; } a:hover { text-decoration: underline; } .left{ float:left; } .right{ float:right; } .hide{ display: none; } .clear{ clear:both; } .overflow{ overflow: hidden; } .atp_choosed{ margin-top:12px; display: none; } .atp_choosed .conn .tally{ display: inline-block; padding:0px 14px; background:#ff9980; color:#fff; font-size:14px; margin: 0 10px 6px 0; } .atp_choosed .conn .tally i{ margin-left:14px; cursor: pointer; } .scholars-recommend-content{ background:#fff; margin-top: 20px; overflow: hidden; } .scholars-recommend-content .choose-content{ height:34px; line-height: 34px; background:#EFEEEE; width:740px; } .scholars-recommend-content .choose-content em{ display: inline-block; font-size:18px; color:#fff; padding:0 16px; background: #79ADD6; } .scholars-recommend-content .choose-content2{ background: transparent; } .scholars-recommend-content .choose-content2 em{ background: transparent; color:#79ADD6; } .scholars-recommend-content .choose-content span{ color:#999; padding:0 10px; cursor: pointer; } .scholars-recommend-content .choose-content2 span{ display: inline-block; padding:2px 8px; border:1px solid #79ADD6; border-radius: 5px 0 5px 0; line-height: 18px; margin:0 6px; } .scholars-recommend-content .sch-moreChoose{ width: 51px; color: #fff; background: #FF8700; outline: 0; height: 34px; float: left; cursor: pointer; border: 0; margin-left: 4px; } .scholars-recommend-content .sch-getmore{ background: #79ADD6; } .scholars-choose-box{ overflow: hidden; } .scholars-choose-box2 ul li{ float:left; margin:0 18px 16px 0; color:#999; cursor: pointer; } .scholars-choose-box2 ul li input{ position: relative; top:1px; margin-right:4px; } .scholars-choose-box2 div.title{ color:#79add6; font-size:18px; padding:14px 20px 0 30px; } .scholars-choose-box2{ padding-top:16px; border:1px solid #D7D7D7; display: none; width: 738px; } .scholars-choose-box2 ul{ width: 578px; } .scholars-choose-box2 .btns input{ width:54px; height:26px; color:#fff; background:#75ACD6; cursor: pointer; border:1px solid transparent; outline: 0; } .scholars-choose-box2 .btns p{ margin-bottom: 8px; } .scholars-choose-box2 .btns input.false{ background:#fff; border-color:#75ACD6; color:#75ACD6; } .atpcontian .att-choose .seemorebox{ width: 708px; } .choosemorebox{ width: 848px; } .scholars-choose-box2 .btns { padding: 2px 0 0 30px; height: 100%; border-left: 1px solid #D7D7D7; } .search{ width: 850px; margin:0 auto; padding-top:100px; }
（3）jQuery的程式碼
$(function(){ //篩選條件單選點選事件 $('.scholars-choose-box').on('click','.choose-content span',function(){ var conn = $(this).text(); var tit = $(this).siblings('em').text(); conn = tit.substring(2,tit.length) +"："+conn; var add = '<span class="tally">'+conn+'<i class="iconfont icon-guanbi">X</i></span>'; $('.atp_choosed').fadeIn(); $('.atp_choosed .conn').append(add); $(this).parent().parent().hide(); }); //更多中單機選擇事件 $('.scholars-recommend-content').on('click','.seemorebox li',function(){ var conn = $(this).text(); var tit = $(this).parent().siblings('.title').text(); conn = tit.substring(2,tit.length)+"："+conn; var add = '<span class="tally">'+conn+'<i class="iconfont icon-guanbi">X</i></span>'; $('.atp_choosed').fadeIn(); $('.atp_choosed .conn').append(add); $(this).parent().parent().siblings('.sch-getmore').text('更多'); $(this).parent().parent().hide(); $(this).parent().parent().siblings('.choose-content').show(); $(this).parent().parent().parent().hide(); }); //點選多選 $('.scholars-choose-box').on('click','.sch-moreChoose',function(){ if($(this).hasClass('sch-getmore')){ if($(this).text()=='更多'){ $(this).text('收起'); $(this).siblings('.seemorebox').show(); $(this).siblings('.choose-content').hide(); }else{ $(this).text('更多'); $(this).siblings('.seemorebox').hide(); $(this).siblings('.choose-content').show(); } }else{ $(this).parent().siblings('.choosemorebox').show(); $(this).parent().hide(); } }); //多選確定 $('.scholars-choose-box.scholars-choose-box2').on('click','.sure',function(){ var conn = $(this).parent().parent().siblings('.title').text(); conn = conn.substring(2,conn.length)+'：'; $(this).parent().parent().siblings('ul').find('li').each(function(){ if($(this).find('input').prop('checked')==true){ conn+=$(this).text()+'、'; } }); var tolength = $(this).parent().parent().siblings('ul').find('li').length; conn=conn.substring(0,conn.length-1); $('.atp_choosed').fadeIn(); var add = '<span class="tally">'+conn+'<i class="iconfont icon-guanbi">X</i></span>'; $('.atp_choosed .conn').append(add); $(this).parent().parent().parent().parent().hide(); }); //多選取消 $('.scholars-choose-box.scholars-choose-box2').on('click','.false',function(){ $(this).parent().parent().parent().parent().hide(); $(this).parent().parent().parent().parent().siblings('.default-box').show(); }); //刪除選項 $('.atp_choosed').on('click','.icon-guanbi',function(){ var choosetit = $(this).parent().text().split('：')[0]; var index = 0; switch(choosetit){ case '作者': index = 0; break; case '領域': index = 1; break; case '研究方向': index = 2; break; default: index = 3; } $(this).parent().remove(); $('.att-choose').eq(index).children('.default-box').show(); if($('.atp_choosed').find('.conn').html()==''){ $('.atp_choosed').hide(); } }); })
在初步完成之後，測出來有一個小bug。就是直接點選更多然後選擇之後，這是選項框已經隱藏，但是‘更多’的那個按鈕的字已經變成‘收起’，關閉此選項框選中的內容後他顯示出來的依舊是‘收起’。所以，要在更多中點選之後要將‘收起’改成‘更多’。