Select all checkbox JavaScript writing (graphic tutorial)

This article mainly introduces the JavaScript writing of the "Select All" checkbox. The html and js codes are attached for everyone to have a deeper understanding. You can check the detailed explanation below for the specific operation steps. Interested friends can For reference.

There are two situations for the operation of the select all box:

1. Click the select all box and select all below

2. Click the check box below, click on all, the all selection box is selected, otherwise the all selection box is not selected.

html style

<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 style

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

jsTips for using DOM event binding

##jsSummary of parsing data skills

Detailed explanation of the use of JS prototype and prototype chain

The above is the detailed content of Select all checkbox JavaScript writing (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!