Cuando se marca la checkbox Expandir Div

Tengo una checkbox:

 
This content should appear when the checkbox is checked

¿Alguien tiene una manera simple de hacer esto?

Esto lo mostrará cuando se marque la checkbox, y lo ocultará de nuevo cuando la checkbox no esté marcada:

 $('#mycheckbox').change(function() { $(this).next('div').toggle(); }); 

… aunque sería mejor si asignaras una identificación a ese DIV, por lo que podría seleccionarse más rápidamente:

    

http://jsfiddle.net/mblase75/pTA3Y/

Si desea mostrar el div sin ocultarlo de nuevo, reemplace .toggle() con .show() .

Adjunte un evento de change y verifique si una casilla está marcada o no. Si la casilla está marcada, muestra la div. De lo contrario, esconderlo:

 $('#mycheckbox').change(function(){ if(this.checked) { $(this).next().show(); } else { $(this).next().hide(); } }); 

También deberías echar un vistazo a los documentos de jQuery , antes de hacer una pregunta tan trivial.

 $("#mycheckbox").change(function(){ $(this).next().toggle(this.checked); }); 
 $("#mycheckbox").click(function() { $(this).next("div").toggle() }) 
 $("input#mycheckbox").click(function() { if($(this).is(":checked") { $("div").slideDown(); } else { $("div").slideUp(); } }) 
 if ($("#mycheckbox").checked) { $("div").style.display = "block"; } 

Si está buscando solo una solución css, esto puede ayudarlo.

 #toggle-content{ display:none; } #mycheckbox:checked ~ #toggle-content{ display:block; height:100px; } 

Violín