Mostrar div según checkbox marcada
Resuelto
crizane
Mensajes publicados
15
Estado
Miembro
-
crizane Mensajes publicados 15 Estado Miembro -
crizane Mensajes publicados 15 Estado Miembro -
Hola,
Estoy intentando, con JavaScript o CSS, mostrar un comentario justo debajo de la casilla de verificación (checkbox) cuando esté marcada y ocultarlo cuando no lo esté. He probado con JS así:
function CommentOptions() {
if(document.getElementById('comment[]').style.display == 'none') {
document.getElementById('comment[]').style.display = 'block';
} else {
document.getElementById('comment[]').style.display = 'none';
}
}
y mi código HTML es el siguiente:
<?php for($i = 0; $i<5; $i++) {
$resultat = $requete->fetch();
$part = $resultat['Begin_date'];
$date = DateTime::createFromFormat('Y-m-d', $part);
//Las dos líneas sirven para convertir la fecha del formato Y-m-d al formato Y/m/d
$part = $date->format('Y/m/d');
$endpart = $resultat['End_date'];
$enddate = DateTime::createFromFormat('Y-m-d', $endpart);
//Las dos líneas sirven para convertir la fecha del formato Y-m-d al formato 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="" .="" /> - <?php echo $endpart .")"?>" />
<?php echo "BR " .$brnumber . " (" .$part ?> - <?php echo $endpart .")"?>
Mis valores de checkbox se generan en un bucle for y desde una base de datos MySQL, y creo que mi problema es que no logro diferenciar cada id de checkbox.
Si alguien conoce una solución… gracias
Configuración: Windows / Chrome 51.0.2704.84
<?php
$note= $resultat['Note'];
if(isset($note)) {
//si hay una nota, entonces se muestra
echo $note;
}
?>
<?php } ?>
2 respuestas
Hola,
Ya.. un ID... debe ser ÚNICO. usar una variable[] .. no puede funcionar.
Entonces a nivel de tu php, lo más simple es hacer:
et côté js :
--
Cordialement,
Jordane
Ya.. un ID... debe ser ÚNICO. usar una variable[] .. no puede funcionar.
Entonces a nivel de tu php, lo más simple es hacer:
<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); //Las dos líneas sirven para convertir la fecha del formato Y-m-d al formato Y/m/d $part = $date->format('Y/m/d'); $endpart = $resultat['End_date']; $enddate = DateTime::createFromFormat('Y-m-d', $endpart); //Las dos líneas sirven para convertir la fecha del formato Y-m-d al formato 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'; } } --
Cordialement,
Jordane
Gracias por tu respuesta, sin embargo eso no funciona a nivel de JavaScript para mostrar y ocultar.. voy a intentar profundizar con los elementos que me diste. Si tienes otra propuesta la acepto...
¿Y si entiendo bien, los echoes que pones por todas partes es para evitar abrir y cerrar etiquetas PHP por todas partes o tiene otra utilidad?
¡Gracias!
¿Y si entiendo bien, los echoes que pones por todas partes es para evitar abrir y cerrar etiquetas PHP por todas partes o tiene otra utilidad?
¡Gracias!
Y si entiendo bien, los echo que pones por todas partes son para evitar abrir y cerrar etiquetas PHP por todas partes
Sí, eso es exactamente.
Si va bien, funciona, solo había comillas de más,
muchas gracias!!
Ah. eso puede ocurrir cuando se codea de cabeza sin probar ^^
Si el problema está resuelto, por favor pon la conversación como 'resuelta' (el enlace se encuentra debajo del título de tu pregunta)
Buenas noches
solo un pequeño ajuste final para terminar, tenía en esta parte una casilla de verificación que me permitía marcar todas las demás como esto:
así que en la línea 9 de mi función cochetout, si copio y pego el nuevo id de las checkboxes ya no funciona, ¿cómo puedo hacerlo?
<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> así que en la línea 9 de mi función cochetout, si copio y pego el nuevo id de las checkboxes ya no funciona, ¿cómo puedo hacerlo?
el código js es el siguiente:
function CocheTodo(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; } } }
Oh sí...
Como te dije... un ID debe ser único... no puede funcionar así!
Falta, a lo sumo, basarte en el "name"
y en cuanto al HTML:
Y para el PHP:
A propósito ... ¿puedes decirme qué contiene tu variable $resultat['Particles_ID'] ?
¿No sería acaso el id del elemento procedente de tu BD ? ¿No deberías usarlo en lugar de la variable $i o colocarlo en el "value" de tus casillas ?????
Tengo la impresión de que copias/pegas sin entenderlo....... ¡no vas a salir adelante si es así!
Como te dije... un ID debe ser único... no puede funcionar así!
Falta, a lo sumo, basarte en el "name"
function CocheTodo(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; } } } y en cuanto al HTML:
<h5>Select all (2015)<input onclick='CocheTodo(this, 'mescases');' type='checkbox'><br/></h5>
Y para el PHP:
echo"<input type='checkbox' id='Choix_".$i."' name='mescases[]' onClick='NoteOption(".$i.")' value='BR ".$brnumber . "('".$part." - ".$endpart "')' /> BR " .$brnumber . " (" .$part ." - ". $endpart .") <br/>"; A propósito ... ¿puedes decirme qué contiene tu variable $resultat['Particles_ID'] ?
¿No sería acaso el id del elemento procedente de tu BD ? ¿No deberías usarlo en lugar de la variable $i o colocarlo en el "value" de tus casillas ?????
Tengo la impresión de que copias/pegas sin entenderlo....... ¡no vas a salir adelante si es así!
Para lo que me diste, en el
el 'mescases' se queda negro en mi página de código, así que pienso que no funciona..
La variable $resultat['Particles_ID'] contiene efectivamente el id del elemento procedente de la base de datos, y entonces si voy a intentarlo.
Justo intento entender bien antes de aplicar los métodos en mi programa pero todavía soy novato así que no es fácil..
<h5>Select all (2015)<input onclick='CocheTout(this, 'mescases');' type='checkbox'><br/></h5>
el 'mescases' se queda negro en mi página de código, así que pienso que no funciona..
La variable $resultat['Particles_ID'] contiene efectivamente el id del elemento procedente de la base de datos, y entonces si voy a intentarlo.
Justo intento entender bien antes de aplicar los métodos en mi programa pero todavía soy novato así que no es fácil..