Sujet Précédent Sujet Suivant

Affichage div selon checkbox cochée

Résolu/Fermé
crizane Messages postés 15 Date d'inscription mercredi 1 juin 2016 Statut Membre Dernière intervention 24 juin 2016 - 14 juin 2016 à 03:42
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






A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38286 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 14 novembre 2024 4 697
14 juin 2016 à 09:19
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
crizane
14 juin 2016 à 23:26
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
jordane45 Messages postés 38286 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 14 novembre 2024 4 697 > crizane
15 juin 2016 à 00:47

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
crizane
15 juin 2016 à 00:23
Si c'est bon ca marche, il y avait juste quelque guillemets de trop,
merci beaucoup!!
0
Réponse 2 / 2
crizane Messages postés 15 Date d'inscription mercredi 1 juin 2016 Statut Membre Dernière intervention 24 juin 2016
15 juin 2016 à 02:25
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
jordane45 Messages postés 38286 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 14 novembre 2024 4 697
15 juin 2016 à 08:54
Et quel est le code js correspondant ?
0
crizane Messages postés 15 Date d'inscription mercredi 1 juin 2016 Statut Membre Dernière intervention 24 juin 2016
15 juin 2016 à 09:29
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
jordane45 Messages postés 38286 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 14 novembre 2024 4 697
Modifié par jordane45 le 15/06/2016 à 11:26
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
crizane
15 juin 2016 à 23:44
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
jordane45 Messages postés 38286 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 14 novembre 2024 4 697 > crizane
Modifié par jordane45 le 16/06/2016 à 00:21
Désolé.. c'est mescase[] qu'il faut utiliser 
<input onclick="CocheTout(this, 'mescases[]');"  type="checkbox">
0

Discussions similaires

adele
marine carnet-pantier -
irongege -

2 réponses
Excel, case à cocher, conditionnelle ?
Asfero -
Mike-31 -

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

2 réponses
Obtenir un affichage décimal sur ma Casio fx 92
Anomyme. -
Bruno -

25 réponses
Agrandir la taille d'affichage de toute l'interface OUTLOOK 2010
bm6969 -
glg29 -

1 réponse