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