Maison > interface Web > js tutoriel > Cocher tout la case Écriture JavaScript (tutoriel graphique)

Cocher tout la case Écriture JavaScript (tutoriel graphique)

亚连
Libérer: 2018-05-19 09:38:49
original
1376 Les gens l'ont consulté

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>
Copier après la connexion

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;
     }
    }
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal