Cocher tout la case Écriture JavaScript (tutoriel graphique)

Cet article présente principalement l'écriture JavaScript de la case à cocher "Sélectionner tout". Les codes html et js sont joints pour que tout le monde puisse avoir une compréhension plus approfondie. Vous pouvez consulter l'explication détaillée ci-dessous pour les étapes de fonctionnement spécifiques. référence.

Il existe deux situations pour le fonctionnement de la boîte de sélection totale :

1 Cliquez sur la boîte de sélection totale et sélectionnez tout ci-dessous

<.>

2. Cliquez sur la case ci-dessous, cliquez sur tout, et la case de sélection de tout est sélectionnée, sinon la case de sélection de tout n'est pas sélectionnée

style js

.

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir

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

Articles connexes :

Conseils pour utiliser la liaison d'événements DOM dans 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;
     }
    }

jsRésumé des techniques d'analyse des données

Explication détaillée de l'utilisation du prototype JS et de la chaîne de prototypes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!