tengo dos funciones
La primera función traduce un clic div en una alternancia marcada/no marcada. La segunda función traduce un cambio de casilla de verificación en un evento ocultar/mostrar.
El problema es que cuando uso la primera función para marcar/desmarcar la casilla, no se llama a la segunda función. Soy nuevo en javascript, gracias.
<script type="text/javascript"> $(document).ready(function() { $(":checkbox").parent().click(function(evt) { if (evt.target.type !== 'checkbox') { var $checkbox = $(":checkbox", this); $checkbox.attr('checked', !$checkbox.attr('checked')); evt.stopPropagation(); return false; } }); }); </script> <script type="text/javascript"> $(document).ready(function() { $(":checkbox").change(function() { if($(this).attr("checked")) { $('.'+this.id).show(); } else { $('.'+this.id).hide(); } }); }); </script>El evento de cambio no se activa cuando cambia mediante programación el valor de una casilla de verificación. Lo que puede hacer para asegurarse de que se dispare es:
$(":checkbox").parent().click(function(evt) { if (evt.target.type !== 'checkbox') { var $checkbox = $(":checkbox", this); $checkbox.attr('checked', !$checkbox.attr('checked')); $checkbox.change(); } });No te molestes con el primer fragmento. Solo usa elementos LABEL:
<label><input type="checkbox">Some option</label>Ahora, cuando el usuario haga clic en la etiqueta (el texto junto a la casilla de verificación), la casilla de verificación se activará.
El segundo fragmento se puede optimizar:
$('input:checkbox').change(function() { $('#' + this.id).toggle(this.checked); });estás usando '.' que es para selectores de clase en su lugar, use '#' ya que está usando la ID del elemento. Me gusta esto:
$(document).ready(function() { $(":checkbox").bind('change', function() { if($(this).attr("checked")) { $('#'+this.id).show(); } else { $('#'+this.id).hide(); } }); });