您好,登錄后才能下訂單哦!
前言
最近幾天在公司做了個(gè)后臺(tái)管理系統(tǒng)的小模塊,其中有個(gè)功能是實(shí)現(xiàn)復(fù)選框的全選和全不選,用bootstrap和jQuery來實(shí)現(xiàn)。
效果是這樣:
因?yàn)槭莾?nèi)部用,樣式也不要求太好看,直接上代碼。
示例代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <META content="IE=11.0000" http-equiv="X-UA-Compatible"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="lib/bootstrap.min.css" rel="external nofollow" /> <link rel="stylesheet" href="style.css" rel="external nofollow" /> <style type="text/css"> .dropdown-menu { width: 500px; height: 170px; padding: 0; } .dropdown-menu .all { width: 100%; height: 44px; background-color: #f9f9fa; line-height: 44px; padding-left: 10px; } .dropdown-menu input[type="checkbox"] { margin-left: 20px; } label.checkbox { display: inline-block; } .choose_bank label { margin-bottom: 16px; } </style> </head> <body> <div class="btn-group choose_bank" > <button class="btn btn-mini" >全部</button> <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown" > <span class="caret"></span> </button> <div class="dropdown-menu"> <label class="all"> <input type="checkbox"> 全部 </label> <label> <input type="checkbox"> 工商銀行 </label> <label> <input type="checkbox"> 農(nóng)業(yè)銀行 </label> <label> <input type="checkbox"> 中國銀行 </label> <label> <input type="checkbox"> 建設(shè)銀行 </label> <label> <input type="checkbox"> 交通銀行 </label> <label> <input type="checkbox"> 郵政銀行 </label> <label> <input type="checkbox"> 招商銀行 </label> <label> <input type="checkbox"> 中信銀行 </label> <label> <input type="checkbox"> 民生銀行 </label> <label> <input type="checkbox"> 光大銀行 </label> <label> <input type="checkbox"> 平安銀行 </label> <label> <input type="checkbox"> 北京銀行 </label> </div> </div> </body> <script src="lib/jquery.min.js"></script> <script src="lib/bootstrap.min.js"></script> <script> var banks = $('.all').siblings().children(); $('.all>input').click(function() { var flag = $(this).prop('checked'); banks.prop('checked', flag); }) banks.click(function() { // 如果有一個(gè)沒選中,全選按鈕不選中 // 如果全部選中,全選按鈕被選中 var num = 0; banks.each(function() { if ($(this).prop("checked")) { num++; } }) if (num == banks.length) { $('.all>input').prop('checked', true); } else { $('.all>input').prop('checked', false); } }) </script> </html>
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如有疑問大家可以留言交流,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。