Menu

Affichage div selon checkbox cochée [Résolu/Fermé]

Messages postés
15
Date d'inscription
mercredi 1 juin 2016
Statut
Membre
Dernière intervention
24 juin 2016
- - Dernière réponse : crizane
Messages postés
15
Date d'inscription
mercredi 1 juin 2016
Statut
Membre
Dernière intervention
24 juin 2016
- 17 juin 2016 à 02:18
Bonjour,

J'essaye tant bien que mal d'effectuer une fonction (Javascript ou css) qui m'affiche un commentaire juste sous la case a cochée (checkbox) si celle-ci est cochée, et qui masque ce commentaire si celle-ci n'est pas cochée. J'ai essayé avec du JS comme ceci:


function CommentOptions()
        {
            if(document.getElementById('comment[]').style.display == 'none')
            {
                document.getElementById('comment[]').style.display = 'block';
            }
            else
            {
                document.getElementById('comment[]').style.display = 'none';
            }
        }



et mon code html est le suivant:


	 <div class="texte_int">
	  <?php for($i = 0; $i<5; $i++) {
			 $resultat = $requete->fetch();
			 $part = $resultat['Begin_date'];
		         $date = DateTime::createFromFormat('Y-m-d', $part); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
                         $part = $date->format('Y/m/d');
                         $endpart = $resultat['End_date'];
			 $enddate = DateTime::createFromFormat('Y-m-d', $endpart); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
                         $endpart = $enddate->format('Y/m/d');
			 $brnumber = $resultat['BRnumber'];?>
   <input type="checkbox" id="Choix[]" 
name="lenom[<?php echo $resultat['Particles_ID'];?>]"  
onClick="NoteOption()" 
value="<?php echo "BR " .$brnumber . " (" .$part ?> - <?php echo $endpart .")"?>" />
<?php echo "BR " .$brnumber . " (" .$part ?> - <?php echo $endpart .")"?> <br/>			  
			  		
<div class="comments" id='comment[]' style="display:none"> 
					<?php $note= $resultat['Note'];
			       if(isset($note)) { //si il y a une note, alors on l'affiche 
			            echo $note;		 
			                        }?>
			        </div> 
			  <?php }?>



Mes valeurs de checkbox sont générées par une boucle for et par une bdd php my sql, et je pense que mon problème est que je n'arrive pas a différencier chaque id de checkbox..

Si quelqu'un connais une solution.. merci






Afficher la suite 

2 réponses

Messages postés
25570
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 mai 2019
1977
0
Merci
Bonjour,
Déjà.. un ID...se doit d'être UNIQUE. utiliser une variable[] .. ne peut pas marcher.

Donc au niveau de ton php, le plus simple c'est de faire :
<div class="texte_int">
 <?php 
 for($i = 0; $i<5; $i++) {
	$resultat = $requete->fetch();
	$part = $resultat['Begin_date'];
	$date = DateTime::createFromFormat('Y-m-d', $part); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
	$part = $date->format('Y/m/d');
	$endpart = $resultat['End_date'];
	$enddate = DateTime::createFromFormat('Y-m-d', $endpart); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
	$endpart = $enddate->format('Y/m/d');
	$brnumber = $resultat['BRnumber'];
	$note = !empty($resultat['Note']) ? $resultat['Note'] : '';

	echo "<input type='checkbox' id='Choix_".$i."' name='lenom[".$resultat['Particles_ID']."]'  
		 onClick='NoteOption('".$i."')' 
		 value='BR ".$brnumber . "('".$part." - ".$endpart ."')' /> 
		 BR '" .$brnumber . "' ('" .$part ." - ". $endpart ."')> <br/>";

	echo "<div class='comments' id='comment_".$i"' style='display:none'> ";
	echo $note;		 
	echo "</div>";
 }
?>
</div> 


et côté js :
 function NoteOption(i){
   var choix = document.getElementById('Choix_'+i);
   var divC = document.getElementById('comment_'+i);
   if(choix.checked){
     divC.style.display = 'block';
   } else {
     divC.style.display = 'none';
   }
   
 }


Merci pour ta réponse, cependant cela ne fonctionne pas au niveau du javascript pour afficher et cacher.. je vais essayer de creuser avec les éléments que tu m'as donné. Si tu as une autre proposition je suis preneur...

Et si je comprends bien, les echo que tu mets partout sont pour éviter d'ouvrir et fermer des balises php partout ou cela a une autre utilité?

merci!
jordane45
Messages postés
25570
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 mai 2019
1977 > crizane -

Et si je comprends bien, les echo que tu mets partout sont pour éviter d'ouvrir et fermer des balises php partout

Oui c'est tout à fait ça.


Si c'est bon ca marche, il y avait juste quelque guillemets de trop,
merci beaucoup!!

Ah. ça peut arriver quand on code de tête sans essayer ^^

Si le souci est réglé, merci de mettre la discussion en 'resolue' (le lien se trouve sous le titre de ta question)

Bonne soirée
Si c'est bon ca marche, il y avait juste quelque guillemets de trop,
merci beaucoup!!
Messages postés
15
Date d'inscription
mercredi 1 juin 2016
Statut
Membre
Dernière intervention
24 juin 2016
0
Merci
juste un dernier petit reglage à regler pour finir, j'avais dans cette partie une checkbox qui me permettait de cocher toutes les autres comme ceci:


	    <li><input class="check"  type="checkbox" id="c5" />

    <label class="year" for="c5">2015</label> (<span id="compteurAff2015">0</span> out of 5 selected.)
      <ul>
		<div id="texte2015" class="texte">
		  <h5>Select all (2015)<input onclick='CocheTout(this, 'Choix_.$i.');' type='checkbox'><br/></h5>
<div class="texte_int">
 <?php 
 for($i = 0; $i<5; $i++) {
	$resultat = $requete->fetch();
	$part = $resultat['Begin_date'];
	$date = DateTime::createFromFormat('Y-m-d', $part); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
	$part = $date->format('Y/m/d');
	$endpart = $resultat['End_date'];
	$enddate = DateTime::createFromFormat('Y-m-d', $endpart); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
	$endpart = $enddate->format('Y/m/d');
	$brnumber = $resultat['BRnumber'];
	$note = !empty($resultat['Note']) ? $resultat['Note'] : '';

	echo"<input type='checkbox' id='Choix_".$i."' name='lenom[".$resultat['Particles_ID']."]'
		 onClick='NoteOption(".$i.")' 
		 value='BR ".$brnumber . "('".$part." - ".$endpart ."')' /> 
		 BR " .$brnumber . " (" .$part ." - ". $endpart .") <br/>";

	echo "<div id='comment_".$i."' style='display:none'> ";
	echo $note;		 
	echo "</div>";
 }
?>
</div> 
	 </div>	 
          </ul>
      </li> 


du coup à la ligne 9 dans ma fonction cochetout, si je copie colle le nouvel id des checkbox cela ne fonctionne plus, comment puis-je faire?
crizane
Messages postés
15
Date d'inscription
mercredi 1 juin 2016
Statut
Membre
Dernière intervention
24 juin 2016
-
le code js est le suivant:

function CocheTout(ref, id) {
	var form = ref;
 
	while (form.parentNode && form.nodeName.toLowerCase() != 'div'){ 
		form = form.parentNode; 
	}
 
	var elements = form.getElementsByTagName('input');
 
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].type == 'checkbox' && elements[i].id == id) {
			elements[i].checked = ref.checked;
		}
	}
}

jordane45
Messages postés
25570
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 mai 2019
1977 -
Ah ouais...

Comme je te l'ai dit .. un ID devant être unique... ça ne peux pas marcher comme ça !
Il faut, à la limite, te baser sur le "name"
function CocheTout(ref, ckbName) {
 var form = ref;
 
 while (form.parentNode && form.nodeName.toLowerCase() != 'div'){ 
  form = form.parentNode; 
 }
 
 var elements = form.getElementsByTagName('input');
 
 for (var i = 0; i < elements.length; i++) {
  if (elements[i].type == 'checkbox' && elements[i].name== ckbName) {
   elements[i].checked = ref.checked;
  }
 }
}


et pour le côté html:
  <h5>Select all (2015)<input onclick='CocheTout(this, 'mescases');' type='checkbox'><br/></h5>


Et pour le PHP :
echo"<input type='checkbox' id='Choix_".$i."' name='mescases[]'
   onClick='NoteOption(".$i.")' 
   value='BR ".$brnumber . "('".$part." - ".$endpart "')' /> 
   BR " .$brnumber . " (" .$part ." - ". $endpart .") <br/>";


Au passage ... peux tu me dire ce que contient ta variable $resultat['Particles_ID'] ?
Ne serait-ce pas l'id de l'élément issue de ta BDD ? Ne devrais tu pas l'utiliser à la place de la variable $i ou le mettre dans le "value" de tes cases ?????

J'ai l'impression que tu copie/colle bêtement du code sans le comprendre....... tu ne vas pas t'en sortir si c'est le cas !
Pour ce que tu m'a donné, dans le
  <h5>Select all (2015)<input onclick='CocheTout(this, 'mescases');' type='checkbox'><br/></h5>

le 'mescases' reste noir dans ma page de code, donc je pense qu'il ne fonctionne pas..

La variable $resultat['Particles_ID'] contient effectivement l'id de l'élément issue de la bdd, et du coup si je vais essayer.

J'essaye justement de bien comprendre avant d'appliquer les méthodes dans mon programme mais je suis encore novice donc c'est pas évident..
jordane45
Messages postés
25570
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 mai 2019
1977 > crizane -
Désolé.. c'est mescase[] qu'il faut utiliser
<input onclick="CocheTout(this, 'mescases[]');"  type="checkbox">
crizane
Messages postés
15
Date d'inscription
mercredi 1 juin 2016
Statut
Membre
Dernière intervention
24 juin 2016
-
Super merci énormément de ton aide !! Ca marche comme je le souhaite !! encore merci