解決bootstrap下拉菜單點(diǎn)擊立即隱藏bug的方法
昨天用jQuery和bootstrap實(shí)現(xiàn)下拉菜單復(fù)選框,今天把做好的demo組合進(jìn)項(xiàng)目里,發(fā)現(xiàn)有點(diǎn)bug,就是點(diǎn)擊銀行復(fù)選框的時(shí)候,每點(diǎn)一次dropdown-menu這個(gè)div會(huì)立即隱藏,這就導(dǎo)致每次只能選一個(gè)。
這應(yīng)該是事件傳播的原因,代碼修改如下:
var banks = $('.all').siblings().children(); $('.all>input').click(function() { var flag = $(this).prop('checked'); banks.prop('checked', flag); }) // 阻止事件傳播, 否則在點(diǎn)擊復(fù)選框的時(shí)候,dropdown-menu這個(gè)div會(huì)立即隱藏 $('.dropdown-menu label').click(function(e) { e.stopPropagation(); }); banks.click(function() { // 如果有一個(gè)沒(méi)選中,全選按鈕不選中 // 如果全部選中,全選按鈕被選中 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); } })
另外,需要新增加的功能是,點(diǎn)擊“保存”按鈕的時(shí)候,需要把選中的銀行名稱(chēng)以逗號(hào)拼接成字符串傳遞給后臺(tái)。這部分比較簡(jiǎn)單,代碼如下:
// 在提交時(shí),獲取選中的所有值,并把這些值拼接成字符串 $('.submit').click(function() { var bankArr = []; banks.each(function() { if ($(this).prop("checked")) { bankArr.push($(this).val()); } }); var bankStr = bankArr.join(','); console.log(bankStr); })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript操作cookie的文章(設(shè)置,刪除cookies)
一篇javascript處理cookie的文章,腳本之家之前發(fā)布過(guò)很多這樣的文章。2010-04-04React Native JSI實(shí)現(xiàn)RN與原生通信的示例代碼
本文主要介紹了React Native JSI實(shí)現(xiàn)RN與原生通信的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08無(wú)間斷滾動(dòng)marquee的詳細(xì)用法解析
無(wú)間斷滾動(dòng)marquee的詳細(xì)用法解析...2006-08-08javascript 拖動(dòng)表格行實(shí)現(xiàn)代碼
用js實(shí)現(xiàn)的拖動(dòng)表格的tr行的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-05-05使用uniapp打包微信小程序時(shí)主包和vendor.js過(guò)大解決(uniCloud的插件分包)
每個(gè)使用分包小程序必定含有一個(gè)主包,所謂的主包,即放置默認(rèn)啟動(dòng)頁(yè)面/TabBar頁(yè)面,以及一些所有分包都需用到公共資源/JS 腳本,下面這篇文章主要給大家介紹了關(guān)于使用uniapp打包微信小程序時(shí)主包和vendor.js過(guò)大解決的相關(guān)資料,,需要的朋友可以參考下2023-02-02