javascript - otra - ¿Por qué no se activa mi evento de cambio de casilla de verificación?

input con enlace

Question

Tengo dos funciones.

La primera función traduce un clic div en un alternador marcado / desmarcado. La segunda función traduce un cambio de casilla de verificación en un evento hide / show.

El problema es que cuando uso la primera función para marcar / desmarcar el cuadro, 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>

Answer 1

El evento de cambio no se activa cuando se cambia el valor de una casilla de verificación mediante programación. Lo que puede hacer para asegurarse de que se active es:

 $(":checkbox").parent().click(function(evt) {
if (evt.target.type !== ''checkbox'') {
var $checkbox = $(":checkbox", this);
$checkbox.attr(''checked'', !$checkbox.attr(''checked''));
$checkbox.change();
}
});

Answer 2

No te molestes con el primer fragmento. Solo use elementos LABEL:

<label><input type="checkbox">Some option</label>

Ahora, cuando el usuario haga clic en la etiqueta (el texto al lado de 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);
});

Answer 3

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();
}
});
});