全選復選框JavaScript編寫小結(附代碼)
更新時間:2017年08月16日 11:03:21 作者:代碼終結者222
這篇文章主要介紹了全選”復選框JavaScript編寫,分別附上html和js代碼以供大家更深刻了解,具體操作步驟大家可查看下文的詳細講解,感興趣的小伙伴們可以參考一下。
對于全選框的操作分為兩種情況:
1.單擊全選框,下面全部選中
2.單擊下面的復選框,全部點擊上,全選框被選中,否則全選框沒有選中。
html樣式
<tr> <td>愛 好</td> <td> <label for=""><input type="checkbox" name="fav" id="" value="蘋果" class="btn"/>蘋果</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; } } //復選框組 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; } }
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助~如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持!
相關文章
JavaScript中匿名函數(shù)的用法及優(yōu)缺點詳解
下面小編就為大家?guī)硪黄狫avaScript中匿名函數(shù)的用法及優(yōu)缺點詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06