解決JQuery全選/反選第二次失效的問題
最近在項(xiàng)目中,遇到一個(gè)問題,測試全選/反選功能時(shí),第一次對母框進(jìn)行選中/非選中時(shí),能同步子框的全選/反選狀態(tài),之后再點(diǎn)擊母框,子框就沒反應(yīng)了。
原代碼大致結(jié)構(gòu)關(guān)鍵如下:
function selectAll(obj){ $('input[name="xxx[]"]').attr("checked",obj.checked); } <input type="checkbox" id="mother" name="mother" onclick="selectAll(this);"/>全選 <input type="checkbox" id="son1" name="xxx[]" />子框<input type="checkbox" id="son2" name="xxx[]" />子框<input type="checkbox" id="son3" name="xxx[]" />子框<input type="checkbox" id="son4" name="xxx[]" />子框
步驟一:嘗試正面剛一波:
function selectAll(obj){ if(obj.checked) { $('input[name="xxx[]"]').attr("checked", true); } else { $('input[name="xxx[]"]').removeAttr("checked"); } }
卒-----完全沒有效果,棄之。
步驟二:快速上網(wǎng)搜索一番,發(fā)現(xiàn)這個(gè)問題比較常見,在遇到過這個(gè)問題的人里,我應(yīng)該排在千里之外了。點(diǎn)開幾個(gè)看了,基本都是說用prop替代attr便能解決,奈何如下:
然而項(xiàng)目上用的版本低于1.6并被告知最好不要更改版本,同棄之。
步驟三:無可奈何,JQuery棄之...嘗試改用原生js寫法,代碼如下:
function selectAll(obj){ var xxx = document.getElementsByName("xxx[]"); if(obj.checked) { for(var i = 0;i < xxx.length;i++) { xxx[i].checked = true; } } else { for(var i = 0;i < xxx.length;i++) { xxx[i].checked = false; } } }
測試一下,順利解決。其實(shí)也算是個(gè)小問題,不過給了我一些啟示,不能局限在一個(gè)框里,多換個(gè)角度思考問題,往往能更好地去解決問題。
以上這篇解決JQuery全選/反選第二次失效的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于jQuery全屏焦點(diǎn)圖左右切換插件responsiveslides
這篇文章主要介紹了基于jQuery全屏焦點(diǎn)圖左右切換插件responsiveslides的相關(guān)資料,需要的朋友可以參考下2015-09-09基于jQuery實(shí)現(xiàn)仿百度首頁換膚背景圖片切換代碼
現(xiàn)在介紹網(wǎng)頁換膚的例子已經(jīng)數(shù)不勝數(shù),自己也沒有仔細(xì)研究過,剛搞遇到類似這個(gè)問題,網(wǎng)上查了資料解決了問題,感覺很有用,就記錄了下來,本文給大家分享基于jQuery實(shí)現(xiàn)仿百度首頁換膚背景圖片切換代碼,需要的朋友可以參考下2015-08-08jQuery中filter()和find()的區(qū)別深入了解
一直不是很清楚filter()方法和find()方法的區(qū)別,看jQuery Cookbook一書后,終于算是搞清楚了,下面將新的與大家分享下2013-09-09jquery實(shí)現(xiàn)的提示浮層跟隨鼠標(biāo)移動(dòng)
提示浮層跟隨鼠標(biāo)移動(dòng)(jquery版)2010-02-02jquery二級導(dǎo)航內(nèi)容均分的原理及實(shí)現(xiàn)
頭部導(dǎo)航二級導(dǎo)航有些內(nèi)容太長,一列的話太過難看,就要分成兩列,要做到按塊盡量均分,排列順序沒有限制2013-08-08jquery的ajax從純真網(wǎng)(cz88.net)獲取IP地址對應(yīng)地區(qū)名
使用jquery的ajax,輕松從純真網(wǎng)(cz88.net)獲取IP地址對應(yīng)地區(qū)名2009-12-12jquery實(shí)現(xiàn)圖片平滑滾動(dòng)詳解
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片平滑滾動(dòng)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03