Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Résolu] Javascript: cocher des checkbox en fonction de l'état d&#

Greywolf

Par Greywolf
dans Programmation

 Partager

Messages recommandés

tabris Junior Member

tabris

Posté(e)
Posté(e) (modifié)

tout d'abord merci d'avoir pris du temps pour mon problème :P

 

j'ai reproduis ce que tu m'as conseillé de faire et ça ne semble pas fonctionner. du coup j'ai simplifié le problème en faisant une page test avec seulement ce qui nous intéresse ici. la voici :

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
 <script language="JavaScript" type="text/javascript">
 //vérifie et décoche des checkbox
 function checkSelect(tabIdElements)
 {
   for (var i = 0 ; i < tabIdElements.length ; i++)
 	{
 	  try
 	  {
 	    var element = document.getElementById(tabIdElements[i]);
       element.checked = true;
  	  }
 	}
 }
 </script>
</head>


<body>
<input type="checkbox" name="layer" id="spot" value="SPOT" onClick="if (this.checked) { checkSelect({'spot1','spot2','spot3','spot4','spot5'}); }">SPOT<br />
  <input type="checkbox" name="layer" id="spot1" value="SPOT1" onClick="if (this.checked) { document.getElementById('spot').checked = false; }">SPOT 1<br />
  <input type="checkbox" name="layer" id="spot2" value="SPOT2" onClick="if (this.checked) { document.getElementById('spot').checked = false; }">SPOT 2<br />
  <input type="checkbox" name="layer" id="spot3" value="SPOT3" onClick="if (this.checked) { document.getElementById('spot').checked = false; }">SPOT 3<br />
  <input type="checkbox" name="layer" id="spot4" value="SPOT4" onClick="if (this.checked) { document.getElementById('spot').checked = false; }">SPOT 4<br />
  <input type="checkbox" name="layer" id="spot5" value="SPOT5" onClick="if (this.checked) { document.getElementById('spot').checked = false; }">SPOT 5<br />
<input type="checkbox" name="layer" id="aster" value="ASTER">ASTER
</body>
</html>

 

l'évènement onclick pour décocher la box SPOT fonctionne bien mais celui qui fait appel à la fonction et qui est censée décocher les cases SPOT1-5 lorsque l'on coche la première ne fonctionne pas. peut-être que j'ai mal fait quelque chose (sûrement en fait ^^) ?

Modifié par Greywolf

KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)
celui qui (...) est censée décocher les cases SPOT1-5 lorsque l'on coche la première ne fonctionne pas
... parce que tu as laissé "element.checked = true" dans checkSelect() au lieu de créer une autre fonction appelée "uncheckSelect()" et/ou de remplacer true par false ;-)
tabris Junior Member

tabris

Posté(e)
Posté(e) (modifié)
... parce que tu as laissé "element.checked = true" dans checkSelect() au lieu de créer une autre fonction appelée "uncheckSelect()" et/ou de remplacer true par false :P

oups ^^

je vais regarder ça, merci :P

 

edit : le remplacement de true par false n'arrange pas le problème : /

Modifié par tabris
tabris Junior Member

tabris

Posté(e)
Posté(e)

désolé pour le double post mais j'ai l'impression qu'il va aussi y avoir des problèmes de conflit avec une autre fonction présente dans mon code, servant à cocher plusieurs checkbox. je l'ai ajoutée à mon code simlplifié :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">

 <script language="JavaScript" type="text/javascript">
   //cocher toutes les checkbox
   function checkAll(status_checked,field)
   {
 	  var i;
     if (field.length)
       for (i = 0 ; i < field.length ; i++)
     	  if (i == 0 || i == field.length-1)
           field[i].checked = status_checked;
     else
       field.checked = status_checked;
   }

   //vérifie et décoche des checkbox
   function checkSelect(tabIdElements)
   {
 	  for (var i = 0 ; i < tabIdElements.length ; i++)
 	  {
 	    try
 	    {
 	  	  var element = document.getElementById(tabIdElements[i]);
 	  	  element.checked = false;
 	    }
 	  }
   }
 </script>
</head>


<body>
<!-- initialisation de mapserver -->
<form name="mapserv" method="GET" action="[program]">

<input type="checkbox" id="toutes" onClick="checkAll(this.checked,this.form.layer);"><label for="toutes">toutes</label><br />

<input type="checkbox" name="layer" id="spot" value="SPOT" onClick="if (this.checked) { checkSelect({'spot1','spot2','spot3','spot4','spot5'}); }" [sPOT_check]><label for="spot">SPOT</label><br />
 <input type="checkbox" name="layer" id="spot1" value="SPOT1" [sPOT1_check] onClick="if (this.checked) { document.getElementById('spot').checked = false; }"><label for="spot1">SPOT 1</label><br />
 <input type="checkbox" name="layer" id="spot2" value="SPOT2" [sPOT2_check] onClick="if (this.checked) { document.getElementById('spot').checked = false; }"><label for="spot2">SPOT 2</label><br />
 <input type="checkbox" name="layer" id="spot3" value="SPOT3" [sPOT3_check] onClick="if (this.checked) { document.getElementById('spot').checked = false; }"><label for="spot3">SPOT 3</label><br />
 <input type="checkbox" name="layer" id="spot4" value="SPOT4" [sPOT4_check] onClick="if (this.checked) { document.getElementById('spot').checked = false; }"><label for="spot4">SPOT 4</label><br />
 <input type="checkbox" name="layer" id="spot5" value="SPOT5" [sPOT5_check] onClick="if (this.checked) { document.getElementById('spot').checked = false; }"><label for="spot5">SPOT 5</label><br />
<input type="checkbox" name="layer" id="aster" value="ASTER" [ASTER_check]><label for="aster">ASTER</label>

</form>
</body>
</html>

cette fonction checkAll est supposée cocher les cases SPOT et ASTER uniquement. si je commente la fonction checkSelect, elle marche mais sinon non. il vaudrait peut-être mieux d'abord régler l'histoire de la fonction checkSelect qui ne marche pas mais je préfère vous soumettre ce problème supplémentaire pour ne pas avoir à revenir sur tout une fois le premier soucis résolu. :P

tabris Junior Member

tabris

Posté(e)
Posté(e)

j'ai cru que ça n'était que pour le message d'erreur, toutes mes confuses.

donc maintenant, ma fonction checkAll semble fonctionner, mais toujours aucun signe de vie de la part de checkSelect :P

 

merci de ton aide !

KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

Le bloc catch ne fait qu'afficher un message, mais même s'il doit être vide il est indispensable... C'est une question de grammaire ;-)

 

aucun signe de vie de la part de checkSelect
Hum...

Effectivement, j'ai un navigateur qui se plaint du tableau(*) passé en paramètre à checkSelect(), mais tout rentre dans l'ordre avec une instanciation plus propre :

onclick="if (this.checked) { checkSelect(new Array('spot1', 'spot2', 'spot3', 'spot4', 'spot5')); }"

Enfin... "plus propre"... Si on excepte le fait qu'on instancie un Array à chaque appel, bien sûr ;-)

tabris Junior Member

tabris

Posté(e)
Posté(e) (modifié)

super, ça marche, merci beaucoup !!

 

c'est déjà bien mieux comme ça mais juste un dernier détail : j'ai ma fameuse seconde fonction (checkAll) qui est censée cocher SPOT et ASTER. comment faire pour que lorsqu'elle coche SPOT, ça décoche les SPOT1-5 ? je suppose qu'il faut appeler la fonction checkSelect depuis la fonction checkAll ? je vais essayer de faire ça par moi-même et je reviendrai vers vous si je n'y parviens pas.

 

Enfin... "plus propre"... Si on excepte le fait qu'on instancie un Array à chaque appel, bien sûr :P
et c'est déconseillé normalement ? Modifié par tabris
tabris Junior Member

tabris

Posté(e)
Posté(e) (modifié)

ça y est, tout fonctionne !

je mets une dernière fois mon code, si jamais quelqu'un en a besoin un jour ou l'autre. je suppose qu'il y a 100 fois plus propre que ce que j'ai mis dans la fonction checkAll mais ça a le mérite de marcher.

 

merci encore KewlCat :P

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">

 <script language="JavaScript" type="text/javascript">
   //cocher toutes les checkbox
   function checkAll(status_checked,field)
   {
 	  var i;
     if (field.length)
       for (i = 0 ; i < field.length ; i++)
       {
     	  if (i == 0 || i == field.length-1)
           field[i].checked = status_checked;
         if (i == 0 && field[i].checked == true)
     	    checkSelect(new Array('spot1', 'spot2', 'spot3', 'spot4', 'spot5'));
       }
     else
       field.checked = status_checked;
   }

   //verifie et decoche des checkbox
   function checkSelect(tabIdElements)
   {
 	  for (var i = 0 ; i < tabIdElements.length ; i++)
 	  {
 	    try
 	    {
 	  	  var element = document.getElementById(tabIdElements[i]);
 	  	  element.checked = false;
 	    }
 	    catch (ex)
 	    {
           alert("Y'a un souci avec la valeur " + tabIdElements[i] + " !");
       }
 	  }
   }
 </script>
</head>


<body>
<!-- initialisation de mapserver -->
<form name="mapserv" method="GET" action="[program]">

<input type="checkbox" id="toutes" onClick="checkAll(this.checked,this.form.layer);"><label for="toutes">toutes</label><br />

<input type="checkbox" name="layer" id="spot" value="SPOT" onclick="if (this.checked) { checkSelect(new Array('spot1', 'spot2', 'spot3', 'spot4', 'spot5')); }" [sPOT_check]><label for="spot">SPOT</label><br />
  <input type="checkbox" name="layer" id="spot1" value="SPOT1" [sPOT1_check] onClick="if (this.checked) { document.getElementById('spot').checked = false; }"><label for="spot1">SPOT 1</label><br />
  <input type="checkbox" name="layer" id="spot2" value="SPOT2" [sPOT2_check] onClick="if (this.checked) { document.getElementById('spot').checked = false; }"><label for="spot2">SPOT 2</label><br />
  <input type="checkbox" name="layer" id="spot3" value="SPOT3" [sPOT3_check] onClick="if (this.checked) { document.getElementById('spot').checked = false; }"><label for="spot3">SPOT 3</label><br />
  <input type="checkbox" name="layer" id="spot4" value="SPOT4" [sPOT4_check] onClick="if (this.checked) { document.getElementById('spot').checked = false; }"><label for="spot4">SPOT 4</label><br />
  <input type="checkbox" name="layer" id="spot5" value="SPOT5" [sPOT5_check] onClick="if (this.checked) { document.getElementById('spot').checked = false; }"><label for="spot5">SPOT 5</label><br />
<input type="checkbox" name="layer" id="aster" value="ASTER" [ASTER_check]><label for="aster">ASTER</label>

</form>
</body>
</html>

Modifié par Greywolf

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...