Case à cocher

21 août 2007, 11:10

Bonjour tout le monde, j'ai un petit problème de case à cocher.
Alors en fait, je dispose d'un tableau avec 4 cellules. Pour chaque cellule, j'ai un titre des et des cases à cocher. A coté de ce titre, j'ai mis une case à cocher qui permet de sélectionner toutes les cases de la cellule.
Mais mon problème est que quand je clique sur une de ces checkbox (à côté du titre) toutes mes checkbox (de mon tableau en entier) sont sélectionnées au lieu d'avoir uniquement celle de la cellule de sélectionnées.

Je ne vois pas où est mon erreur.

Voici mes codes :

<?/*---------------------------------*/
      //on ouvre le fichier criteria.xml
      $criteriaFile = $cfg['ressources_root'].'/criteria.xml';
      $domCriteria = new DOMDocument('1.0','UTF-8');
      $domCriteria->load($criteriaFile);
      $xpCriteria = new DOMXPath($domCriteria);
      $cat_criteria = $domCriteria->getElementsByTagName('cat');
      $result_find_criteria = $domCriteria->getElementsByTagName('criteria');
      
      echo "<table align='center' width='100%'><tr>";
      $j='0';
      foreach($cat_criteria as $cat){
        $name_cat = $cat->getAttribute('name');
        $id_cat = $cat->getAttribute('id');
        echo "<td valign='top'><br /><strong><h2 style='font-size: 14px;'>".$name_cat." : </strong><input type='checkbox' id='valide$id_cat' onChange='if (document.getElementById(\"valide$id_cat\").checked) { cochetout(); } else { decochetout(); } ;'></h2><br><br>";
        foreach ($cat->childNodes as $criteria)
        {
          if ($criteria->nodeType != XML_ELEMENT_NODE) continue;
          if ($criteria->tagName == 'criteria')
          {
            $name_criteria = $criteria->getAttribute('name');
            $id_criteria = $criteria->getAttribute('id');      
            echo "<ul><input type='checkbox' id='crit[]' name='crit[]' value='$id_cat/$id_criteria'>$name_criteria</input></ul>";
          }
        }
      $j++;
      }
      echo "</tr></table>";
    ?>

et mes fonctions javascript :

Code : Tout sélectionner

function cochetout() {
  var liste = document.getElementsByTagName('input');
  for (var i = 0; i < liste.length; ++i) {
    var obj = liste[i];
    if (obj.type == 'checkbox' && obj.id == 'crit[]') {
      obj.checked = true;
    }
  }
}

function decochetout() {
  var liste = document.getElementsByTagName('input');
  for (var i = 0; i < liste.length; ++i) {
    var obj = liste[i];
    if (obj.type == 'checkbox' && obj.id == 'crit[]') {
      obj.checked = false;
    }
  }
}

21 août 2007, 11:23

Il suffit de regarder les fonctions cochetout et decochetout.
Tu mets dans une liste tous les INPUT et tu coches/décoches toutes les cases à cocher qui ont pour identifiant crit[], ce qui est le cas de toutes tes cases à cocher.

Il faut donner un identifiant différents pour chaque ligne, par exemple:
crit[numeroligne][] ou crit_numeroligne[].

21 août 2007, 11:26

oui mais je ne connais pas le nombre de lignes car celui-ci est créé dynamiquement

21 août 2007, 11:32

Modération :
Afin d'obtenir plus de réponses, le sujet est déplacé dans le forum "Javascript, AJAX".

21 août 2007, 11:34

oui mais je ne connais pas le nombre de lignes car celui-ci est créé dynamiquement

alors tu crées les identifiants dynamiquement également.

Tu peux utiliser les identifiants de tes catégories par exemple.

echo "<ul><input type='checkbox' id='crit_".$id_cat."[]' name='crit_".$id_cat."[]' value='$id_cat/$id_criteria'>$name_criteria</input></ul>";

et ensuite dans tes fonctions javascript, passer l'identifiant en paramètre et l'utiliser pour cocher les bonnes cases.

21 août 2007, 11:45

$numero_ligne = 0; tu l'utilise quand dans le dev ?

21 août 2007, 11:51

$numero_ligne = 0; tu l'utilise quand dans le dev ?

jamais désolé, oublié de l'enlever. c'est inutile si tu utilises le numéro de catégorie puisque chaque ligne est une catégorie différente.

21 août 2007, 11:55

pas chaque ligne, mais chaque cellule.
Mais ensuite comment exécuter l'action de cocher les cases dans le script javascript. Car celui que j'ai fait, ne prend pas en compte cette variable $id_cat que j'ai rajouté dans l'id de mon input

21 août 2007, 12:01

il suffit de la rajouter en paramètre dans les fonctions javascript.

...cochetout(".$id_cat.")

et de la traiter dans la fonction javascript :

Code : Tout sélectionner

function cochetout(id_cat) { 
  var liste = document.getElementsByTagName('input'); 
  for (var i = 0; i < liste.length; ++i) { 
    var obj = liste[i]; 
    var identifiant = 'crit_'+ id_cat +'[]';
    if (obj.type == 'checkbox' && obj.id == identifiant) { 
      obj.checked = true; 
    } 
  } 
}

21 août 2007, 12:02

oui c'est ce que j'étais en train de faire.. lol

j'avais ca :

Code : Tout sélectionner

function cochetout(id_cat) {
  var liste = document.getElementsByTagName('input');
  for (var i = 0; i < liste.length; ++i) {
    var obj = liste[i];
    if (obj.type == 'checkbox' && obj.id == 'crit_'+ id_cat +'[]') {
      obj.checked = true;
    }
  }
}

qui revient au même que ce que tu as fait.

Case à cocher

Qui est en ligne