Affichage div selon checkbox cochée

Résolu
crizane Messages postés 15 Statut Membre -  
crizane Messages postés 15 Statut Membre -
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

2 réponses

  1.
    jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     
    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';
   }
   
 }

    0
    1. crizane
       
      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!
      0
      1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832 > 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
        0
    2. crizane
       
      Si c'est bon ca marche, il y avait juste quelque guillemets de trop,
      merci beaucoup!!
      0
  2. crizane Messages postés 15 Statut Membre
     
    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?
    0
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
       
      Et quel est le code js correspondant ?
      0
    2. crizane Messages postés 15 Statut Membre
       
      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;
		}
	}
}
      0
    3. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
       
      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 !
      0
    4. crizane
       
      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..
      0
    5. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832 > crizane
       
      Désolé.. c'est mescase[] qu'il faut utiliser 
      <input onclick="CocheTout(this, 'mescases[]');"  type="checkbox">
      0

Discussions similaires

league of legend impossible d'initialiser le dispositif d'affichage
pascontent -
Tsagax -

5 réponses
URGENT - codes ALT + ???
infotruc -
infotruc -

2 réponses
cocher des cases
beli -
karine -

6 réponses
cocher une case avec le clavier
Pikoulon -
Fitz -

10 réponses
Bug d'affichage sur ma Freebox Revolution
BourrinOman83 -
brupala -

4 réponses