Cocher et decocher toutes les cases checkbox

Résolu
Lap-top
Messages postés
56
Date d'inscription
vendredi 9 décembre 2011
Statut
Membre
Dernière intervention
5 octobre 2016
- Modifié par jordane45 le 24/09/2014 à 17:33
Lap-top
Messages postés
56
Date d'inscription
vendredi 9 décembre 2011
Statut
Membre
Dernière intervention
5 octobre 2016
- 24 sept. 2014 à 21:00
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

jordane45
Messages postés
35770
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 juillet 2022
358
Modifié par jordane45 le 24/09/2014 à 18:05
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
1
Lap-top
Messages postés
56
Date d'inscription
vendredi 9 décembre 2011
Statut
Membre
Dernière intervention
5 octobre 2016

24 sept. 2014 à 21:00
Merci jordane, j'ai essayé d'appliquer ton code au mien et là maintenant ça passe normalement.
0