Forum d'entraide PHPFrance

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;
    }
  }
}

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[].

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

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

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.

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

$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.

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

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; 
    } 
  } 
}

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.

Forum d'entraide PHPFrance

Case à cocher

Case à cocher