Hoe onderhoudt u de status van een div-pagina na het opnieuw laden van de checkbox?

Ik heb een div die verschijnt wanneer een selectievakje is aangevinkt en verbergt wanneer niet aangevinkt. Als het formulier fouten bevat, wordt de pagina opnieuw geladen en wordt de div verborgen weergegeven, ook al is het selectievakje vóór verzending gecontroleerd. Ik kan een aanroep toevoegen aan de onLoad-gebeurtenis, maar is er een schonere manier om ervoor te zorgen dat de div na het opnieuw laden van de pagina wordt gerenderd op basis van de status van het selectievakje?

css:

#maintenance-window { display: none; }

jQuery:

$("#check-hasMaintenance").click(function() {
    $(this).is(":checked") ? $('#maintenance-window').show("fast") : $('#maintenance-window').hide("fast")
});

HTML:

<input type="checkbox" value="1" id="check-hasMaintenance">
<div id="maintenance-window">
    Stuff
</div>
1
Mee eens, ik ben bang dat je vastzit met JavaScript en onLoad daarvoor, als je niet een soort server-side validatie wilt doen en een extra klasse aan de div wilt toevoegen wanneer de pagina wordt weergegeven, die de div verbergt.
toegevoegd de auteur Christofer Eliasson, de bron
Dat is ongeveer wat ik zou doen.
toegevoegd de auteur asawyer, de bron

1 antwoord

Optie 1

Zorg ervoor dat div wordt weergegeven op basis van het selectievakje wanneer de pagina wordt geladen:

$(document).ready(function() {
    //Modified for readability - inline if is fine.
     if($("#check-hasMaintenance").is(":checked"))
         $('#maintenance-window').show("fast")
     else
         $('#maintenance-window').hide("fast");
});

Vereenvoudigde hide/show code:

$("#check-hasMaintenance").click(function() {
    $('#maintenance-window').toggle('fast');
});

Optie 2

Een korte versie als deze zou ook moeten werken:

$(document).ready(function() {
    $('#maintenance-window').toggle($("#check-hasMaintenance").is(":checked"));
});

$("#check-hasMaintenance").click(function() {
    $('#maintenance-window').toggle('fast');
});
2
toegevoegd
in uw eerste voorbeeld zou ik dit moeten wijzigen in het object-ID, anders zal het document niet weten wat ik bedoel met this , toch?
toegevoegd de auteur Mohamad, de bron
bedankt. Ik kan bevestigen dat de korte-handversie werkt. Ik heb de JS in een apart bestand dat in het lichaam is geladen. Ik heb alles ingepakt in een $ (functie() {}); - is dit nodig als ik geen inline JS heb?
toegevoegd de auteur Mohamad, de bron
@Mohamad, vernieuw de pagina, ik heb die kopie + plakfout al eeuwen geleden gerepareerd :)
toegevoegd de auteur James Hill, de bron