javascript auf Seite laden, um Formular zu verbergen

Question

Ich benutze das folgende Javascript, um ein Formular auszublenden, wenn der Benutzer auf ein Kontrollkästchen klickt.

Ich versuche, den Code beim Laden der Seite auszuführen, bin aber nicht in der Lage, herauszufinden, wie dies zu tun ist. Kann jemand helfen?

$('#no_cage').change(function(){ 
    if (this.checked) { 
    $('#cage_details').fadeOut(); 
    } else { 
    $('#cage_details').fadeIn(); 
    }     
}); 

HTML:

<input name="no_cage" id="no_cage" type="checkbox" value="1" <?php echo $checked; ?>><label for="no_cage">Check if not required</label> 

<div id="cage_details"> 

<form> 

... 

</form> 

</div> 

Dies funktioniert gut, wenn ein Benutzer auf das Kontrollkästchen klickt. Aber nicht wenn es aus der DB zieht und die Checkbox beim Seitenladen bereits ausgewählt ist.

Answer 1

Fügen Sie diesen Code einfach in den Document Ready-Handler ein. Es wird die Änderung Event-Handler ausgelöst werden, ohne es zu müssen eigentlich ... Alternativ

$('#no_cage').trigger("change"); 

ändern, nur das Ereignis auslösen, wo Sie es erklären ...

$('#no_cage').change(function(){ 
    if (this.checked) { 
     $('#cage_details').fadeOut(); 
    } 
    else { 
     $('#cage_details').fadeIn(); 
    }     
}).trigger("change"); 

dass der Ereignishandler hinzufügen und dann führe es sofort aus, um das Formular in den korrekten Zustand zu versetzen, wenn das Dokument geladen wurde.

Answer 2

Sie können entweder die geprüfte Eigenschaft ändern oder das Änderungsereignis auslösen.

$(function() { 
 

 
    $('#no_cage').change(function() { 
 
    if (this.checked) { 
 
     $('#cage_details').fadeOut(); 
 
    } else { 
 
     $('#cage_details').fadeIn(); 
 
    } 
 
    }); 
 

 
    // Change the checked property 
 
    $('#no_cage').prop('checked', true); 
 

 
    // OR trigger the change event 
 
    // $('#no_cage').trigger('change'); 
 

 
});