全選複選框JavaScript編寫（圖文教學）

這篇文章主要介紹了全選」複選框JavaScript編寫,分別附上html和js程式碼以供大家更深刻了解,具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。

2.點選下面的複選框，全部點擊上，全選框被選中，否則全選框沒有選中。

<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;
     }
    }

上面是我整理給大家的，希望今後會對大家有幫助。

js中DOM事件綁定使用小技巧

#js

解析資料技巧總結

#JS原型與原型鏈使用詳解

以上是全選複選框JavaScript編寫（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！