Cocher et decocher toutes les cases checkbox [Résolu]

Signaler
Messages postés
56
Date d'inscription
vendredi 9 décembre 2011
Statut
Membre
Dernière intervention
5 octobre 2016
-
Messages postés
56
Date d'inscription
vendredi 9 décembre 2011
Statut
Membre
Dernière intervention
5 octobre 2016
-
Bonjour à tous, j'essaies de créer un bouton (ayant pour contenu "Cocher tout") pouvant me permettre lorsque je clic dessus de cocher toutes les cases d'un input "checkbox" et une fois que ces cases sont cochées, le texte du bouton change et devient "Décocher tout". A son tour, lorsqu'on clique sur "décocher tout", il déselectionne toutes les cases.
Le code des actions fonctionnent mais mon problème est au niveau des conditions. Quelles conditions doit je poser pour ne pas que le programme dans les deux if de suite? Merci d'avance

Voila le code (html et javascipt) :
<body>

<label><input type="checkbox" name="check" value="1" /> Case n°
1</label><br />
<label><input type="checkbox" name="check" value="2" /> Case n°
2</label><br />
<label><input type="checkbox" name="check" value="3" /> Case n°
3</label><br />
<label><input type="checkbox" name="check" value="4" /> Case n°
4</label>
<br /><br />
<button id = "butt" >Tout cocher</button>
<input type="button" value="Afficher la case cochée"
onclick="check();" />

<script>
 var but = document.getElementById('butt');
 var inputs = document.getElementsByTagName('input');
 var coch = false; 
 
 for (var i = 0 ; i < inputs.length ; i++) 
   {
    if(inputs[i].checked = false)
     {
      coch = true;
     }
    
   }
 
 if(coch = true)
 {

 but.addEventListener('click', function()
  {  
  but.innerHTML = "Tout decocher";
  for (var i = 0 ; i < inputs.length ; i++) 
   {
    inputs[i].checked = true;
   }
  }, false
      );
    
 }else
  {
  but.addEventListener('click', function()
   {  
   but.innerHTML = "Tout cocher";
   for (var i = 0 ; i < inputs.length ; i++) 
    {
     inputs[i].checked = false;
    }
   }, false
       );    
 
  }
 
 </script>
</body>


EDIT : Ajout des balises de code.

3 réponses

Messages postés
32980
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 juin 2021
351
Voici une version qui "conserve" ton addEvent


 var but = document.getElementById('butt');
  but.addEventListener('click', function(){  
   checkUncheck(but);
  }, false
 );    

 
 function checkUncheck(but){
  console.log("checkUncheck");
  var checkboxes = document.getElementsByTagName('input');
  var coch = false; 
   for (var i = 0 ; i < checkboxes.length ; i++){
    if (checkboxes[i].type == 'checkbox') {
    if(checkboxes[i].checked == false){
      coch = true;
     } 
 }
   }
  if(coch == true) {
  console.log("choch=true");
   but.innerHTML = "Tout decocher";
   cocherdecocherTout(true);   
  }else{
    console.log("choch=false");
    but.innerHTML = "Tout cocher";
    cocherdecocherTout(false);
  }
 }
 
 function cocherdecocherTout(boo){
 console.log("cocherdecocherTout:"+boo);
  var checkboxes = document.getElementsByTagName('input');
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].type == 'checkbox') {
  checkboxes[i].checked = boo;
  }
   }
 }


Au passage ... attention... lorsque tu faisais tes TESTS IF ... les égalités se vérifient avec "===" ou "==" mais surtout pas avec un seul "=" !

Avant de poser une question, merci de lire la charte du site.
Cordialement, Jordane
Messages postés
56
Date d'inscription
vendredi 9 décembre 2011
Statut
Membre
Dernière intervention
5 octobre 2016

Merci jordane, j'ai essayé d'appliquer ton code au mien et là maintenant ça passe normalement.
Messages postés
32980
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 juin 2021
351
Bonjour,

<html>
<head></head>
<body>
<label><input type="checkbox" name="check" value="1" /> Case n°
1</label><br />
<label><input type="checkbox" name="check" value="2" /> Case n°
2</label><br />
<label><input type="checkbox" name="check" value="3" /> Case n°
3</label><br />
<label><input type="checkbox" name="check" value="4" /> Case n°
4</label>
<br /><br />
<button id = "butt" value="1" onclick="checkUncheckALL();" >Tout cocher</button>
<input type="button" value="Afficher la case cochée"
onclick="check();" />

<script type="text/javascript">
function checkUncheckALL(){
 var but = document.getElementById('butt');
 var action = but.value;
 var checkboxes = document.getElementsByTagName('input');
 
 if(action==1){
	console.log("cocher tout");
	   for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
		}
	but.value=0;
 }else{
	console.log("décocher tout");
	for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].type == 'checkbox') {
          checkboxes[i].checked = false;
      }
	}
	but.value=1;
 }
 


}
</script>

</body>
</html>

Messages postés
32980
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 juin 2021
351
Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code