[Résolu] Problème avec cases à cocher (javascript, php et html)

Bonjour,

A l'aide, svp !!!

J'ai un problème avec mes cases à cocher.
Mon souci vient du fait que j'utilise javascript, php (avec $_POST) et html !
Pour votre gouverne, en php, pour affichage des coches,
j'ai besoin de clics[00], clics[01]...
Et je n'arrive pas à gérer cela en javascript !

Pouvez-vous m'aider ?
Grand merci d'avance.

Voici le html :

      <div id="graphique02"><span class="bold">Sélection des pages</span><br>
      	<ul>
        <li><input type="checkbox" name="clics[0]" <?php echo ($_POST['clics'][0] == "00")?"checked='checked'":""; ?> value="00" id="click00" onClick="toutourien();">&nbsp;<label for="click00">Toutes les pages</label></li>
        <li><input type="checkbox" name="clics[1]" <?php echo ($_POST['clics'][1] == "01")?"checked='checked'":""; ?> value="01" id="click01">&nbsp;<label for="click01">Accueil</label></li>
        <li><input type="checkbox" name="clics[2]" <?php echo ($_POST['clics'][2] == "02")?"checked='checked'":""; ?> value="02" id="click02">&nbsp;<label for="click02">Création</label></li>
        <li><input type="checkbox" name="clics[3]" <?php echo ($_POST['clics'][3] == "03")?"checked='checked'":""; ?> value="03" id="click03">&nbsp;<label for="click03">Impression</label></li>
        <li><input type="checkbox" name="clics[4]" <?php echo ($_POST['clics'][4] == "04")?"checked='checked'":""; ?> value="04" id="click04">&nbsp;<label for="click04">Web Design</label></li>
        <li><input type="checkbox" name="clics[5]" <?php echo ($_POST['clics'][5] == "05")?"checked='checked'":""; ?> value="05" id="click05">&nbsp;<label for="click05">Kit promo</label></li>
        <li><input type="checkbox" name="clics[6]" <?php echo ($_POST['clics'][6] == "06")?"checked='checked'":""; ?> value="06" id="click06">&nbsp;<label for="click06">Boutique</label></li>
        <li><input type="checkbox" name="clics[7]" <?php echo ($_POST['clics'][7] == "07")?"checked='checked'":""; ?> value="07" id="click07">&nbsp;<label for="click07">Contact</label></li>
        <li><input type="checkbox" name="clics[8]" <?php echo ($_POST['clics'][8] == "08")?"checked='checked'":""; ?> value="08" id="click08">&nbsp;<label for="click08">FAQ</label></li>
        <li><input type="checkbox" name="clics[9]" <?php echo ($_POST['clics'][9] == "09")?"checked='checked'":""; ?> value="09" id="click09">&nbsp;<label for="click09">Recherche</label></li>
        <li><input type="checkbox" name="clics[10]" <?php echo ($_POST['clics'][10] == "10")?"checked='checked'":""; ?> value="10" id="click10">&nbsp;<label for="click10">News</label></li>
        <li><input type="checkbox" name="clics[11]" <?php echo ($_POST['clics'][11] == "11")?"checked='checked'":""; ?> value="11" id="click11">&nbsp;<label for="click11">Espace Client</label></li>
        <li><input type="checkbox" name="clics[12]" <?php echo ($_POST['clics'][12] == "12")?"checked='checked'":""; ?> value="12" id="click12">&nbsp;<label for="click12">Paiement</label></li>
        <li><input type="checkbox" name="clics[13]" <?php echo ($_POST['clics'][13] == "13")?"checked='checked'":""; ?> value="13" id="click13">&nbsp;<label for="click13">Mentions</label></li>
        <li><input type="checkbox" name="clics[14]" <?php echo ($_POST['clics'][14] == "14")?"checked='checked'":""; ?> value="14" id="click14">&nbsp;<label for="click14">Promos</label></li>
        <li><input type="checkbox" name="clics[15]" <?php echo ($_POST['clics'][15] == "15")?"checked='checked'":""; ?> value="15" id="click15">&nbsp;<label for="click15">Conditions</label></li>
        <li><input type="checkbox" name="clics[16]" <?php echo ($_POST['clics'][16] == "16")?"checked='checked'":""; ?> value="16" id="click16">&nbsp;<label for="click16">Facebook</label></li>
        <li><input type="checkbox" name="clics[17]" <?php echo ($_POST['clics'][17] == "98")?"checked='checked'":""; ?> value="98" id="click17">&nbsp;<label for="click17">Documents</label></li>
        <li><input type="checkbox" name="clics[18]" <?php echo ($_POST['clics'][18] == "99")?"checked='checked'":""; ?> value="99" id="click18">&nbsp;<label for="click18">Administrateur</label></li>
        </ul>
      </div>
	  <div id="methode">
          Valeurs<br>
          <label><input type="radio" name="modele" id="modele" value="abs" class="checkbox" <?php echo ($_POST['modele']=="abs")?checked:"";?>> absolues</label><br>
          <label><input type="radio" name="modele" id="modele" value="rel" class="checkbox" <?php echo ($_POST['modele']=="rel")?checked:"";?>> relatives</label>
      </div>

voici le javascript :
PS : Pour la lecture du code, j'ai dû remplacer les "crochetouvert i crochetfermé" par (i)

function toutourien() {
	var maxi=18;
	var choix = document.getElementsByName('clics[]');
	if (choix.checked == true) { 
		for (var i=1; i<=maxi; i++) {
			choix(i).checked = true ;
		}
	} else {
		for (var i=1; i<=maxi; i++) {
			choix(i).checked = false ;
		}
	}
}

function plustoutouplusrien(ind) {
	var maxi=18;
	var i=0;
	var vari=0;
	var choix = document.getElementsByName('clics[]');
	if (choix(ind).checked == false && choix.checked == true) { 
		choix.checked = false;
	}
	choix[0].checked = true;
	for (i=1; i<=maxi; i++) {
		if (choix(i).checked == false) {
			choix(0).checked = false;
		}
	}
	for (i=1; i<=maxi; i++) {
		if (choix(i).checked == true) {
			vari =+1;
		}
	}
	if (vari == maxi) {
		choix[0].checked = true;
	}
}

Voici le php :

			$param = "";
                        for ($ii=0; $ii<=$maxii; $ii++) {
				if ($_POST['clics'][$ii] != "") {
					$param .=  $_POST['clics'][$ii]."*";
				}
			}

Modifié par jytest (22 Jun 2012 - 21:28)

Je viens aussi d'essayer avec :

function toutourien() {
	var maxi=18;
	var choix = new Array ();
	<?php
		for ($k=0; $k<=$maxii; $k++) {
			if ($_POST['clics'][k] != "") {
				echo "choix[k].checked = true;";
			} else {
				echo "choix[k].checked = false;";
			}
		}
	?>);
	if (choix[0].checked == true) { 
		for (var k=1; k<=maxi; k++) {
			choix[k].checked = true ;
		}
	} else {
		for (var k=1; k<=maxi; k++) {
			choix[k].checked = false ;
		}
	}
}

Mais cela ne fonctionne pas non plus !
Bizarre, je sens que j'approche !

Pouvez-vos m'aider ? svp
Modifié par jytest (21 Jun 2012 - 09:22)

Bonjour,

<?php
	for ($k=0; $k <= $maxii; $k++) {
		if ($_POST['clics'][k] != "") {
			echo "choix[k].checked = true;";
		} else {
			echo "choix[k].checked = false;";
		}
	}
?>

Ici tu es en PHP... N'oublie pas le "$" devant le nom de la variable k.
Ensuite, je ne suis pas sûr qu'un attribut name puisse contenir des crochets dans son nom...

Edit : Bon, ça semble fonctionner les crochets dans le nom...
Modifié par Gothor (21 Jun 2012 - 09:39)

Je t'explique.
J'ai un formulaire, avec des cases à cocher.
Il faut qu'en repassage de page, php retienne les valeurs du tableau $clics,
(d'où l'emploi de $_POST['clics'][valeur_indice])
qui contient, à l'élément 0, la valeur "00" si la première case est cochée,
qui contient, à l'élément 1, la valeur "01" si la 2e case est cochée...
et ainsi de suite.

Mais aussi qu'un script javascript
lise ce même tableau.
Car, je souhaite que, quand on coche la 1ere check (élément 0, qui correspond à toutes les pages),
que les checkbox suivantes soient cochées (éléments 1 à 18).
Et donc aussi que les $_POST individuels changent aussi par la même occasion.

Peux-tu m'aider encore un peu ?
Modifié par jytest (22 Jun 2012 - 21:29)

Salut,

jytest a écrit :
Mon souci vient du fait que j'utilise javascript, php (avec $_POST) et html !

Tout ça en même temps!

Excuse moi mais je voit pas comment on pourrai t'aider vu que ton script est une soupe incompréhensible de grand n'importe quoi...

Si ton but est de faire échanger PHP et JS, oublie, PHP peut passer du JS mais jamais l'inverse, pour une raison que j'en ai marre d'expliquer a longueur de temps...

        var choix = new Array ();
	<?php
		for ($k=0; $k<=$maxii; $k++) {
			if ($_POST['clics'][$k] != "") {
				echo "choix[$k].checked = true;";
			} else {
				echo "choix[$k].checked = false;";
			}
		}
	?>

Juste ça c'est une ignominie ... Pourquoi?

tu instancie la variable "choix" sous forme d'un tableau vide, ensuite tu essaye d'utiliser $k qui est sensé se trouver dans le tableau vide (logique).

tu essaye de passer du JS avec du PHP, pourquoi faire? assigner des valeurs statiques aux variables....

Gothor a écrit :
tu instancies un tableau

var choix = new Array()

mais qui ne sert à rien... Il est instancié, on lui ajoute des valeurs, et il est supprimé à la fin de ta fonction sans avoir eu d'utilité...

Ou pas
Modifié par JJK801 (21 Jun 2012 - 11:15)

Remarquons qu'il n'essaye pas de passer du JS au PHP mais juste du PHP au JS... Et c'est ce qu'il fait avec

<?php
	for ($k=0; $k <= $maxii; $k++) {
		if ($_POST['clics'][$k] != "") {
			echo "choix[$k].checked = true;";
		} else {
			echo "choix[$k].checked = false;";
		}
	}
?>

Pourquoi dis-tu que $k appartient à un tableau vide ? Pourquoi le tableau $_POST['clics'] serait forcément vide ?

Et oui il remplit bien son tableau... Son code va générer quelque chose du style

var choix = new Array ();
choix[0].checked = true;
choix[1].checked = true;
...
choix[17].checked = true;
choix[18].checked = true;

Donc il est rempli...

Gothor a écrit :

Remarquons qu'il n'essaye pas de passer du JS au PHP mais juste du PHP au JS... Et c'est ce qu'il fait avec

<?php
	for ($k=0; $k &lt;= $maxii; $k++) {
		if ($_POST['clics'][$k] != &quot;&quot;) {
			echo &quot;choix[$k].checked = true;&quot;;
		} else {
			echo &quot;choix[$k].checked = false;&quot;;
		}
	}
?>

Ma main a couper qu'il pense executer son code PHP a chaque appel de sa fonction.

Gothor a écrit :
Pourquoi dis-tu que $k appartient à un tableau vide ? Pourquoi le tableau $_POST['clics'] serait forcément vide ?

$_POST['clic'] n'est pas forcement vide, les tableau JS "choix" lui, oui.

Gothor a écrit :

Et oui il remplit bien son tableau... Son code va générer quelque chose du style

var choix = new Array ();
choix[0].checked = true;
choix[1].checked = true;
...
choix[17].checked = true;
choix[18].checked = true;

Donc il est rempli...

Ah bon? Traduction literrale:

var choix = new Array (); //Créer un nouveau tableau vide et l'assigner a la variable choix
choix[0].checked = true; //activer l'attribut "checked" du premier élément du tableau (qui n'existe pas)
choix[1].checked = true; //activer l'attribut "checked" du second élément du tableau (qui n'existe pas)
...
choix[17].checked = true; //activer l'attribut "checked" du 17eme élément du tableau (qui n'existe pas)
choix[18].checked = true; //activer l'attribut "checked" du 18eme élément du tableau (qui n'existe pas)

Sans même tester les script je peut te dire les erreurs renvoyer par le debuggeur:

- choix[0] is undefined
- choix[0].checked is undefined
- choix[1] is undefined
- choix[1].checked is undefined
- ...
Modifié par JJK801 (21 Jun 2012 - 11:54)

oui, c'est ça le truc.

Si son tableau ne contient pas ses noeuds DOM, il en fera rien mais son script est gangréné a un point que c'est pas une correction qu'il faut mais le refaire simplement.
Modifié par JJK801 (21 Jun 2012 - 12:15)

Bon, c'est bien parce qu'on se connait depuis longtemps (eh oui, quelques heures sur le web c'est toute une vie )

On va commencer par mettre de l'ordre dans ton fichier HTML:

<?php
$checkboxes = array(
                "Accueil",
                "Création",
                "Impression",
                "Web Design",
                "Kit promo",
                "Boutique",
                "Contact",
                "FAQ",
                "Recherche",
                "News",
                "Espace Client",
                "Paiement",
                "Mentions",
                "Promos",
                "Conditions",
                "Facebook",
                "Documents",
                "Administrateur"
              );


?>
<div id="graphique02">
  <span class="bold">Sélection des pages</span><br />
  <form action="" method="" id="checkForm">
    <ul>
      <li>
        <input type="checkbox" name="clics[]" <?php echo ($_POST['clics'][0] == "00")?"checked='checked'":""; ?> id="click00" onClick="toutourien(this);">
        <label for="click00">Toutes les pages</label>
      </li>
      <?php
      foreach($checkboxes as $key => $checkbox)
      {
        $num = $key+1;
        $id = 'click' . sprintf('%02d', $num);
    ?>
        <li>
            <input type="checkbox" name="clics[]" <?php echo ( isset($_POST['clic'][$num]) ? "checked='checked'" : "" ); ?> id="<?php echo $id; ?>">
            <label for="<?php echo $id; ?>"><?php echo $checkbox; ?></label>
        </li>
    <?php
      }
      ?>
    </ul>
  </form>
</div>
<div id="methode">
  <span>Valeurs</span>
  <br />
  <label>
    <input type="radio" name="modele" id="modele" value="abs" class="checkbox" <?php echo ($_POST['modele']=="abs")?checked:"";?> />absolues
  </label>
  <br />
  <label>
    <input type="radio" name="modele" id="modele" value="rel" class="checkbox" <?php echo ($_POST['modele']=="rel")?checked:"";?>> relatives
  </label>
</div>

Qu'ai je corrigé?

- Inutile de mettre name="clics[0]", en mettant name="clics[]" l'index se fera automatiquement
- Les checkbox, quand elles ne sont pas cochés ne renvoi rien, inutile de leur assigner une valeur juste pour les tester, un isset() suffit (sauf si tu a une valeur spécifique a passer)
- Pourquoi faire une redondance de code dificile a maintenir (obligé de modifier toutes les lignes a chaque modif), alors qu'une boucle PHP est bien plus simple?

Ensuite, le JS:

function toutourien(element)
    {
      var formElements = element.form.elements; // On récupére tous les éléments du formulaire "appelant"
    
      var check = element.checked; // On défini l'état a mettre aux checkboxes
      
      for(var k = 0; k < formElements.length; k++)
      {
        if(formElements[k].type == "checkbox") // On vérifie qu'il s'agis bien d'une checkbox
        {
          formElements[k].checked = check; // On assigne l'état de référence aux checkboxes
        }
      }
    }

En prime, on peut mettre les checkbox en disabled et ne garder qu celle qui indique "toutes les pages", ceci, dans le but d'alléger la requête HTTP.
Modifié par JJK801 (21 Jun 2012 - 16:54)

Génial, cela fonctionne...
Evidemment que cela fonctionne, me diras-tu ?
Et en plus, avec des commentaires très explicatifs et très clairs !

Merci. Merci. Merci.

Par contre, puis-je encore...?
vu que nous nous connaissons depuis longtemps (cfr ton message précédent),
je me permets d'abuser :

1.
Ton script JS coche bien toutes les checkboxes, quand on clique sur "toutes les pages"
... Mais pour le décochage de "toutes les pages" cela se passe comment ?
Apparemment cela est intégré dans cette fonction. Mais pourquoi cela ?

2.
Afin de retenir les checkbox cochées, au rechargement de la feuille,
j'ai rajouté l'indice $num... comme ceci :

a écrit :
<input type="checkbox" name="clics[<?php echo $num; ?>]" <?php echo (isset($_POST['clics'][$num])?"checked='checked'":""); ?> id="<?php echo $id; ?>">

Et là cela fonctionne apparemment...

3.
Toujours en JS,
je souhaiterais que quand on clique sur "toutes les pages",
toutes les pages se cliquent. Là, c'est déjà ok !
Mais, soyons fous, quand je déclique alors sur l'une ou l'autre des pages,
j'aurais souhaité que "toutes les pages" se déclique tout seul !!!
par la fonction "plustoutouplusrien(ind)"...
Et si, on coche toutes les 18 pages,
comment faire en sorte que la checkbox "toutes les pages" soit automatiquement cochée ?
Ces folies sont réalisables mais je suis bloqué la aussi pour cette fonction

function plustoutouplusrien(k) {
	var maxi=18;
	var i=0;
	var vari=0;
	var choix = document.getElementsByName('clics[]');
	if (choix[k].checked == false && choix.checked == true) { 
		choix.checked = false;
	}
	choix[0].checked = true;
	for (k=1; k<=maxi; k++) {
		if (choix[k].checked == false) {
			choix[0].checked = false;
		}
	}
	for (k=1; k<=maxi; k++) {
		if (choix[k].checked == true) {
			vari =+1;
		}
	}
	if (vari == maxi) {
		choix[0].checked = true;
	}
}

Modifié par jytest (22 Jun 2012 - 17:32)

jytest a écrit :

Ton script JS coche bien toutes les checkboxes, quand on clique sur &quot;toutes les pages&quot;
... Mais pour le décochage de &quot;toutes les pages&quot; cela se passe comment ?
Apparemment cela est intégré dans cette fonction. Mais pourquoi cela ?

C'est grâce a cette ligne:

var check = element.checked; // On défini l'état a mettre aux checkboxes

la variable "check" prendra true si la fonction est appelé au cochage, et false si elle est appelé au décochage, et ça répercute sur toutes les autres checkbox.

jytest a écrit :

Afin de retenir les checkbox cochées, au rechargement de la feuille,
j'ai rajouté l'indice $num... comme ceci :
<input type="checkbox" name="clics[<?php echo $num; ?>]" <?php echo (isset($_POST['clics'][$num])?"checked='checked'":""); ?> id="<?php echo $id; >">

En effet, dans ton cas c'est nécessaire, car comme tu a besoin de savoir quel est le numéro précis de la checkbox, si elles ne sont pas toutes envoyée, les numéros ne correspondront plus...

jytest a écrit :

Toujours en JS,
je souhaiterais que quand on clique sur "toutes les pages",
toutes les pages se cliquent. Là, c'est déjà ok !
Mais, soyons fous, quand je déclique alors sur l'une ou l'autre des pages,
j'aurais souhaité que "toutes les pages" se déclique tout seul !!!
par la fonction "plustoutouplusrien(ind)"...
Et si, on coche toutes les 18 pages,
comment faire en sorte que la checkbox "toutes les pages" soit automatiquement cochée ?

function plustoutouplusrien(element) {
  var elements = element.form.elements;  // On selectionne les elements du formulaire
  var elementToutOuRien = elements[0]; // On défini l'element "Tout ou rien" (le premier)
  var check = true; // Par défaut le "tout ou rien" doit être coché

  for(var k = 1; k < elements.length; k++) // On commence à 1 pour ne pas tenir compte du "Tout ou rien"
  {
    if( ( elements[k].type == "checkbox" ) && !elements[k].checked ) // On tient compte que des checkbox non cochée
    {
       check = false; // Si une des checkbox est décoché, on décoche le "Tout ou rien"
       break; // On arrête la boucle
    }
  }

  elementToutOuRien.checked = check; // On défini si le "Tout ou rien" est coché ou non
}

ensuite tu met un onclick="plustoutouplusrien(this)" sur l’élément qui est dans ta boucle PHP, et c'est bon.(pas testé mais a priori ça doit le faire)
Modifié par JJK801 (22 Jun 2012 - 21:10)