Cocher toutes les cases sachant qu'elles ont un nom différent

Cocher toutes les cases sachant qu'elles ont un nom différent - HTML/CSS - Programmation

Marsh Posté le 31-05-2006 à 17:05:36    

Bonjour,
 
Je débute en javascript et depuis un long moment je cherche à résoudre un problème.
J'ai des cases à cocher avec des noms différents et je souhaiterai, en cochant une case en haut du tableau cocher toutes les cases (comme sous hotmail).
 
Pour cocher toutes les cases portant un même nom, il y pas de problème, j'utilise ce script :

Code :
  1. function check(field) {
  2. if (checkflag == "false" ) {
  3.  for (i = 0; i < field.length; i++) {
  4.   field[i].checked = true;
  5.  }
  6.  checkflag = "true";
  7. }
  8. else {
  9.  for (i = 0; i < field.length; i++) {
  10.   field[i].checked = false;
  11.  }
  12.  checkflag = "false";
  13.  }
  14. }


 
qui est appelé par

Code :
  1. onClick="check(this.form.pdt)"


 
les noms des cases sont de la forme :

Code :
  1. pdt[112]


 
Je bloque complètement depuis un moment donc si vous aviez des conseils à me donner cela m'aiderait beaucoup.
 
Merci d'avance.

Reply

Marsh Posté le 31-05-2006 à 17:05:36   

Reply

Marsh Posté le 31-05-2006 à 17:10:26    

Reply

Marsh Posté le 31-05-2006 à 17:15:03    

C'est gentil mais j'ai déjà fait une recherche.
J'ai d'ailleur essayé le script suivant trouvé sur le forum :

Code :
  1. function checkAll(){
  2. checkflag = ! checkflag; //on inverse le flag
  3. var inpNodes = document.getElementsByTagName('input');
  4. foreach(input in inpNodes){
  5.  if ( input.getAttribute['type'] == 'checkbox'){
  6.   input.checked = checkFlag;
  7.   //alert(input.value + ' => ' + document.getElementById('champ_'+input.value);
  8.  }
  9. }
  10. }


 
Et il me met que la fonction checkAll n'est pas défini, je comprends pas pourquoi.

Reply

Marsh Posté le 31-05-2006 à 17:18:12    

qui vient d'ailleurs de toi, si je ne me trompe pas

Reply

Marsh Posté le 31-05-2006 à 17:18:19    

elle a l'air très bien cette fonction :o et l'erreur laisse plus penser à une mauvaise implémentation ...
 
Tu peux filer le code de toute la page ou tu l'utilise?

Reply

Marsh Posté le 31-05-2006 à 17:22:22    

Code :
  1. <script language="javascript">
  3. //Fonction javascript permettant de cocher/décocher simultanément toutes les cases
  4. var checkflag = true;
  6. function checkAll(){
  7. checkflag = ! checkflag; //on inverse le flag
  8. var inpNodes = document.getElementsByTagName('input');
  9. foreach(input in inpNodes){
  10.  if ( input.getAttribute['type'] == 'checkbox'){
  11.   input.checked = checkFlag;
  12.   //alert(input.value + ' => ' + document.getElementById('champ_'+input.value);
  13.  }
  14. }
  15. }
  17. </script>
  19. </head>
  21. <body>
  22. <form action="importationCatalogue.php" method="GET" name="supprProduit">
  23. <table border="0" cellspacing="0" cellpadding="3">
  24.   <tr height="24" class="enTete">
  25.     <td class="enTete">
  26.   <input type="checkbox" name="toutCocher" onClick="javascript:checkAll()" checked="checked">
  27. </td>
  28.     <td class="enTete">R&eacute;f&eacute;rence</td>
  29.     <td class="enTete">Nom</td>
  30.   </tr>
  31.   <?php
  32.   foreach($enAttente as $pdtEnAttente){
  33.    // Choix des couleurs de lignes
  34. if ($i == 0){
  35.  $coultab = "cellule1";
  36.  $i = 1;
  37. }else{
  38.  $coultab = "cellule2";
  39.  $i = 0;
  40. }
  41.   ?>
  42.   <tr height="24" class="<?=$coultab?>">
  43.     <td class="<?=$coultab?>" align="center">
  44.  <INPUT type="checkbox" name="pdt[<?= $pdtEnAttente['id_produit'] ?>]" id="pdt[<?= $pdtEnAttente['id_produit'] ?>]" value="1" checked="checked">
  45. </td> 
  46.     <td class="<?=$coultab?>"><?= $pdtEnAttente['reference'] ?></td>
  47.     <td class="<?=$coultab?>"><?= $pdtEnAttente['nom'] ?></td>
  48.   </tr>
  49.   <?php
  50.   }
  51.   ?>
  52. </table>
  53. </form>
  54. </body>
  55. </html>

Reply

Marsh Posté le 31-05-2006 à 17:30:20    

Code :
  1. /*
  2. / Coche ou décoche en fonction du booléen passé en paramètre  
  3. / toutes les checkbox présentes sur la page.
  4. /
  5. / Param : check
  6. / on coche tout si check = true
  7. / on décoche tout si check = false
  8. */
  9. function CheckAllCheckBoxes(check)
  10. {
  11. for(i = 0; i < document.forms[0].elements.length; i++)
  12. {
  13.  var elm = document.forms[0].elements[i];
  14.  if (elm.type == "checkbox" )
  15.  {
  16.   if(!elm.disabled)
  17.   {
  18.    elm.checked = check;
  19.   }
  20.  }
  21. }
  22. }

Reply

Marsh Posté le 31-05-2006 à 17:38:23    

Merci beaucoup Pikti, ça marche nickel !

Reply

Marsh Posté le 31-05-2006 à 17:40:50    

de rien, si tes checkbox sont toujours enabled (ou si tu t'en fiches ou veux qu'elles soient cochées/décochées quand même), vire le test

Code :
  1. if(!elm.disabled)           
  2. {
  3. }


 
 
bon, et faut pas avoir 15000 éléments sur la page avec un script comme ça.


Message édité par pikti le 31-05-2006 à 17:41:35
Reply

Marsh Posté le 31-05-2006 à 17:43:36    

oui je devais être bien fatigué quand j'ai ecrit ça, y'a plein de boulettes :o

  • foreach existe pas en js
  • getAttribute c'est une fonction il faut donc remplacer les crochets par des parenthèses
Code :
  1. function checkAll(){
  2.   checkflag = ! checkflag; //on inverse le flag
  3.   var inpNodes = document.getElementsByTagName('input');
  4.   for(var i=0; i< inpNodes.length;i++){
  5.     if ( inpNodes[i].getAttribute('type') == 'checkbox'){
  6.       inpNodes[i].checked = checkflag;
  7.     }
  8.   }
  9. }


 
La solution de pikti est tout à fait correcte mais "oldschool", l'usage de form et elements a tendance à être eviter au profit des fonctions DOM ( getElmenents etc).

Reply

Marsh Posté le 31-05-2006 à 17:43:36   

Reply

Marsh Posté le 31-05-2006 à 17:44:02    

ok, merci pour ton aide

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed