Affichage div selon checkbox cochée
Résolu
crizane
Messages postés
15
Date d'inscription
Statut
Membre
Dernière intervention
-
crizane Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
crizane Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
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:
et mon code html est le suivant:
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
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:
- Affichage div selon checkbox cochée
- Affichage double ecran - Guide
- Windows 11 affichage classique - Guide
- Div c++ - Télécharger - Langages
- Problème affichage fenêtre windows 10 - Guide
- Raccourci clavier case cochée ✓ - Forum Excel
2 réponses
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 :
et côté js :
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';
}
}
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:
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?
<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?
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;
}
}
}
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"
et pour le côté html:
Et pour le PHP :
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 !
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
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..
<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..
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!
Oui c'est tout à fait ça.
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
merci beaucoup!!