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

Messages postés
56
Date d'inscription
vendredi 9 décembre 2011
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.
Afficher la suite 

Votre réponse

3 réponses

Messages postés
23596
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 décembre 2018
0
Merci
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>

Commenter la réponse de jordane45
Messages postés
23596
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 décembre 2018
0
Merci
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
Lap-top
Messages postés
56
Date d'inscription
vendredi 9 décembre 2011
Dernière intervention
5 octobre 2016
-
Merci jordane, j'ai essayé d'appliquer ton code au mien et là maintenant ça passe normalement.
Commenter la réponse de jordane45
Messages postés
23596
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 décembre 2018
-1
Merci
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
Commenter la réponse de jordane45

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.