全選復(fù)選框JavaScript編寫(xiě)小結(jié)(附代碼)
對(duì)于全選框的操作分為兩種情況:
1.單擊全選框,下面全部選中
2.單擊下面的復(fù)選框,全部點(diǎn)擊上,全選框被選中,否則全選框沒(méi)有選中。
html樣式
<tr> <td>愛(ài) 好</td> <td> <label for=""><input type="checkbox" name="fav" id="" value="蘋(píng)果" class="btn"/>蘋(píng)果</label> </td> <td> <label for=""><input type="checkbox" name="fav" id="" value="香蕉" class="btn"/>香蕉</label> </td> <td> <label for=""><input type="checkbox" name="" id="checkAll" value="全選" class="btn"/>全選</label> </td> </tr>
js樣式
var oChkAll = document.getElementById("checkAll"); //全選 oChkAll.onclick = function() { for(var i = 0; i < oFav.length; i++) { oFav[i].checked = this.checked; } } //復(fù)選框組 for(var i = 0; i < oFav.length; i++) { oFav[i].onclick = function() { //如果全選 if(isChkAll()) { oChkAll.checked = true; } else { oChkAll.checked = false; } } } //判斷是否全選 function isChkAll() { var all = oFav.length; var chk = 0; for(var i = 0; i < oFav.length; i++) { if(oFav[i].checked) { chk++; } } if(all == chk) { return true; } else { return false; } }
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助~如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持!
相關(guān)文章
用JavaScript實(shí)現(xiàn)頁(yè)面重定向功能的教程
這篇文章主要介紹了用JavaScript實(shí)現(xiàn)頁(yè)面重定向功能的教程,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06只需20行代碼就可以寫(xiě)出CSS覆蓋率測(cè)試腳本
短短20行代碼,就可以寫(xiě)一個(gè)CSS覆蓋率測(cè)試腳本,需要的朋友參考下2013-04-04JavaScript中匿名函數(shù)的用法及優(yōu)缺點(diǎn)詳解
下面小編就為大家?guī)?lái)一篇JavaScript中匿名函數(shù)的用法及優(yōu)缺點(diǎn)詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06js setTimeout 常見(jiàn)問(wèn)題小結(jié)
主要包括this指向問(wèn)題、向setTimeout傳入?yún)?shù)等相關(guān)問(wèn)題,下面與大家分享下以上問(wèn)題的解決方法,感興趣的朋友可以參考下2013-08-08一起來(lái)學(xué)習(xí)JavaScript的語(yǔ)法基礎(chǔ)
這篇文章主要為大家詳細(xì)介紹了JavaScript的語(yǔ)法基礎(chǔ),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-03-03JavaScript DOM 學(xué)習(xí)第二章 編輯文本
在這一章我會(huì)給出一個(gè)在CMS里非常有用的更新頁(yè)面的代碼。在任一段落點(diǎn)擊鼠標(biāo)你就可以修改了。完成以后點(diǎn)擊按鈕,修改的文本就顯示了。2010-02-02