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.

A voir également:

Checkbox html choix unique
Html case à cocher choix unique - Meilleures réponses
Tout cocher - Meilleures réponses
Checkbox choix limité ✓ - Forum Javascript / DHTML
Checkbox tableau php/html ✓ - Forum PHP
Désactiver une case à cocher ✓ - Forum Javascript / DHTML
Html array - Conseils pratiques -PHP
Span html - Forum PHP

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 344
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

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.

Réponse 2 / 3

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 344
24 sept. 2014 à 17:43

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>

Discussions similaires

Case of - step by step

CASE WHEN

help me select case

"Select Case" avec ".contains" ?

Problèmes sur des Case When imbriqués

utiliser les cas en delphi

Votre réponse

Discussions similaires