C
uando queremos dar una estética dinámica a nuestra página solemos utilizar jQuery para mostrar elementos dinámicamente. En esta ocasión os mostraré como mostrar un elemento en función de que radio button o checkbox esté seleccionado con jQuery.
Lo primero que debemos hacer es crear los elementos HTML como los del siguiente ejemplo:
<div class="sist_reports">
<input type="radio" name="numprioridad" value="1" checked>Realizada
<input type="radio" name="numprioridad" value="2">Pendiente
<input type="radio" name="numprioridad" value="3">Futura
</div>
<div id="dat_rep">
<label for="name">Fecha</label>
<input type="date" name="datfecha" id="datepicker" readonly="readonly" size="12" value="" required/>
</div>
Justo antes el cierre de la etiqueta </body> añadimos la función jQuery
$('input:radio[name=check]').click(function () {
valrad = $('input:radio[name=numprioridad]:checked').val();
if(valrad==1)
$("#dat_rep").show();
else
$("#dat_rep").hide();
});
Os explicaré lo que hace cada línea:
$('input:radio[name=check]').click(function () {
Invoca una función cada vez que se hace click en el elemento radio cuyo name es check
valrad = $('input:radio[name=numprioridad]:checked').val();
Almacenamos el valor del radio seleccionado en la variable valrad
if(valrad==1)
Comprobamos que el valor sea igual a 1
$("#dat_rep").show();
Mostramos el elemento con id=dat_rep
$("#dat_rep").hide();
Ocultamos el elemento con id=dat_rep
Con esta función se pueden hacer muchas cosas que añaden valor a nuestra página facilitando la interacción del usuario.
Hola como vas? copie tu ccdigo para probarlo ya que ando buscando algo igual, pero no me funciono.. Otra cosa fue que en esta parte del codigo $('input:radio[name=check]:').click(function () me saca un error de syntaxis.. te agradeceria de antemano si me podes arreglar eso, ya que me sirve 😀 y soy muy nuevo en estos temas gracias
Hola Alejandro,
a simple vista me parece que sobran los dos puntos después de [name=check], es decir, quedaría algo tal que:
$('input:radio[name=check]').click(function ()
Los dos puntos se ponen para evaluar el checked, que este no es el caso.
Espero con esto te sirva… y ánimo cen tu aventura con jQuery, es apasionante!!
Este comentario ha sido eliminado por el autor.
Hola, Como vas? espero que bien..
Estuve probando nuevamente el código que tiene, y pues le falta ponerle
scrip types=text/javascript
y cambiarle el name=check por name=numprioridad
Porque si no no haria nada 🙂 Me sirvio mucho. Pero te hago otra pregunta, de casualidad sabes como hacer para que se imprima un contenido mas de una vez, para formulario. Ejemplo: Hay mas contactos que deseas agregar y por medio del radio valor = si
muestre otra vez el formulario para ingresar la informacion correspondiente.
Te lo agradeceria de Antemano
Hola Alejandro,
lógicamente los javascripts van dentro de scrip types=text/javascript pero normalmente lo obvio para no cargar de código la página.
Para añadir varios, por ejemplo, contactos, deberías de crear una función javascript que te cree nuevos inputs (apretando, por ejemplo, un botón añadir). Yo por lo menos es como lo hago, desconozco si se podría hacer más sencillo con jquery 🙂
Ánimo que veo que vas por el buen camino!
xandru muchas gracias me funcion perfect !!!!