méthode js pour implémenter la sélection complète des cases à cocher, aucune sélection et les compétences de sélection inverse

méthode js pour implémenter la sélection complète des cases à cocher, aucune sélection et les compétences de sélection inverse_javascript

WBOY

Libérer： 2016-05-16 16:15:09

original

1258 Les gens l'ont consulté

L'exemple de cet article décrit comment implémenter la sélection complète, la non-sélection et la sélection inverse de case à cocher en js. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. Idées :

1. Obtenir des éléments

2. Ajoutez des événements de clic pour tout sélectionner, désélectionner ou inverser la sélection

3. Utiliser la case à cocher pour la boucle

4. Cochez la case sur true pour tout sélectionner

5. Définissez coché la case sur false pour la désélectionner

6. Grâce au jugement, si coché est vrai et que l'état sélectionné est défini, définissez coché sur faux et non sélectionné. Si coché est faux et non sélectionné, définissez coché sur vrai et sélectionné.

2. Code HTML :

<input type="button" value="全选" id="sele"/>
<input type="button" value="不选" id="setinterval"/>
<input type="button" value="反选" id="clear"/>
<div id="checkboxs">
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
</div>

Copier après la connexion

3.code js :

<script>
window.onload=function(){

  var sele=document.getElementById('sele');//获取全选
  var unsele=document.getElementById('setinterval');//获取不选
  var clear=document.getElementById('clear');//获取反选
  var checkbox=document.getElementById('checkboxs');//获取div
  var checked=checkbox.getElementsByTagName('input');//获取div下的input
//全选
   sele.onclick=function(){
    for(i=0;i<checked.length;i++){
    checked[i].checked=true
          }
     }

//不选
    unsele.onclick=function(){
      for(i=0;i<checked.length;i++){
       checked[i].checked=false
          }
      }
//反选
    clear.onclick=function(){
       for(i=0;i<checked.length;i++){
        if(checked[i].checked==true){
        checked[i].checked=false
         } 
   else{
     checked[i].checked=true
       }
       }
      }
}
</script>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.