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

Lap-top 56 Messages postés vendredi 9 décembre 2011Date d'inscription 5 octobre 2016 Dernière intervention - 24 sept. 2014 à 17:16 - Dernière réponse : Lap-top 56 Messages postés vendredi 9 décembre 2011Date d'inscription 5 octobre 2016 Dernière intervention
- 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.
Afficher la suite 

4 réponses

Répondre au sujet
jordane45 20561 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 avril 2018 Dernière intervention - 24 sept. 2014 à 17:43
0
Utile
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
jordane45 20561 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 avril 2018 Dernière intervention - Modifié par jordane45 le 24/09/2014 à 18:05
0
Utile
1
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 56 Messages postés vendredi 9 décembre 2011Date d'inscription 5 octobre 2016 Dernière intervention - 24 sept. 2014 à 21:00
Merci jordane, j'ai essayé d'appliquer ton code au mien et là maintenant ça passe normalement.
Commenter la réponse de jordane45
jordane45 20561 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 avril 2018 Dernière intervention - 24 sept. 2014 à 17:33
-1
Utile
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.