Holo que tal todos...
Bueno, la cosa es que yo no se nada de JQuery asi que por ahí buscando y buscando solo logre conseguir este código:
<html>
<head>
<title>Mostrar Ocultar</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#mayoria_edad").click(function(evento){
if ($("#mayoria_edad").attr("checked")){
$("#formulariomayores").css("display", "block");
}else{
$("#formulariomayores").css("display", "none");
}
});
});
</script>
</head>
<body>
<form>
Nombre: <input type="text" name="nombre">
<br>
<input type="checkbox" name="mayor_edad" value="1" id="mayoria_edad"> Soy mayor de edad
<br>
<div id="formulariomayores" style="display: none;">
Dato para mayores de edad: <input type="text" name="mayores_edad">
</div>
</form>
</body>
</html>
Esto lo que hace es que cuando el usuario presiona el botón "checked" el Style display: none; se desactica y en su lugar se activa el Style display: block;
La cosa es que como no se nada de JQuery ni javascript entonces no lo se modificar y yo lo que quiero es que los usuarios tengan, digamos seis checkbox uno para cada categoria:
<input type="checkbox" name="StyleLapiz" value="1" id="Lapiz">
<input type="checkbox" name="StyleBoligrafo" value="2" id="Boligrafo">
<input type="checkbox" name="StyleCreyon" value="3" id="Creyon">
<input type="checkbox" name="StyleAnimal" value="4" id="Animal">
<input type="checkbox" name="StylePersonas" value="5" id="Personas">
<input type="checkbox" name="StyleAnime" value="6" id="Anime">
Y luego, las imágenes:
<div class="Lapiz Animal"><img src="Dibujo_001.png" /></div>
<div class="Boligrafo Animal"><img src="Dibujo_002.jpg" /></div>
<div class="Creyon Animal"><img src="Dibujo_003.jpg" /></div>
<div class="Lapiz Personas"><img src="Dibujo_004.jpg" /></div>
<div class="Boligrafo Personas"><img src="Dibujo_005.jpg" /></div>
<div class="Creyon Personas"><img src="Dibujo_006.jpg" /></div>
<div class="Lapiz Anime"><img src="Dibujo_007.jpg" /></div>
<div class="Boligrafo Anime"><img src="Dibujo_008.jpg" /></div>
<div class="Creyon Anime"><img src="Dibujo_009.jpg" /></div>
Pero fíjense como las imágenes todas tienen iguales o diferentes categorías entre si, bueno, si yo solo quiero ver las imágenes de "Animal" entonces selecciono "Animal", si quiero ver "Personas" selecciono "Personas" y si quiero ver dos o mas a la vez solo selecciono "Animal" y "Lapiz" por ejemplo.
El problema de este código es que no funciona de manera correcta con dos o mas categorias.
En fin, quisiera ver si hay alguien que me pueda dar este código ya echo, si no es mucha molestia ;-)
Pero que funcione al menos con las seis categorias que les di arriba. Y no olviden el código .js :rolleyes:
Ok... Creo que fue mucho pedir. Pueden decirme entonces exactamente que busco.? Porque ya googlee lo mas que pude y eso fue lo mas que conseguí.
Me pueden ayudar en algo.?? :-\
MOD: No hacer doble post. Usa el botón modificar.
Te recomiendo hacer un tutorial de jquery, eso que quieres hacer es entre las cosas básicas, con usar un selector y cambiarle el css basta
Para que te funciones con mas de 1 elemento en lugar de usar el selector jQuery por id $('#idDeTuElemento') tendrias que hacerlo por un elemnto compartido, lo ideal seria usar un nombre de clases. Por ejemplo a todas las categorias les creamos la clases 'mi_categoria'
<input class="mi_categoria" type="checkbox" name="StyleLapiz" value="1" id="Lapiz">
<input class="mi_categoria" type="checkbox" name="StyleBoligrafo" value="2" id="Boligrafo">
<input class="mi_categoria" type="checkbox" name="StyleCreyon" value="3" id="Creyon">
<input class="mi_categoria" type="checkbox" name="StyleAnimal" value="4" id="Animal">
<input class="mi_categoria" type="checkbox" name="StylePersonas" value="5" id="Personas">
<input class="mi_categoria" type="checkbox" name="StyleAnime" value="6" id="Anime">
Entonces en el selector de jQuery tenes que apsar el nombre de la clase, te pongo un ejemplo que cuando se clickea en un checkbox se muestre un alerta:
$(document).ready( function(){
$('.mi_categoria').on('click', function(e){
var item_id = $(this).attr('id');
alert(item_id)
});
} );
Demo online: http://codepen.io/anon/pen/MbedOG
Otra cosa, no se debe usar $('...').click(...) es mejor usar $('...').on('click',function(){...})
PD: Si nos sabes los basico de javascript es imposible entender jQuery, asi que te recomiendo que te leas algunos tutoriales de introduccion, lo basico de js y jquery se aprende y 2 o 3 dias.