Controllare se casella di controllo è già selezionata al carico utilizzando jQuery

Question

Attualmente sto usando

$("#some-box").click(function(){ 
    $("#main-box").toggle(); 
    }); 

che funziona bene, tranne quando la casella di controllo è parte di una pagina che salva lo stato caselle di controllo. Se una casella di controllo viene salvata come spuntata, la casella principale (che viene rivelata quando si fa clic sulla casella di controllo) è nascosta in ricarica ed è visibile solo se si fa clic sulla casella di controllo, che ora significa casella di controllo "non selezionato" (come previsto con l'interruttore).

Come posso controllare il caricamento della pagina se la casella è già spuntata, nel qual caso attivare il commutatore automaticamente?

Answer 1

questo dovrebbe funzionare:

if ($("#some-box").is(':checked')){ 
    $("#main-box").show(); 
} 

Answer 2

Usa is(':checked') per testare e mostrare la casella se la casella è selezionata:

if ($('#some-box').is(':checked')) { 
    $('#main-box').show(); 
} 

e quindi utilizzare il gestore click così come sono.

Answer 3

È possibile ottenere lo stato iniziale con .attr("checked") o .prop("defaultChecked"). Tuttavia, penso che il seguente è un modo migliore:

function update() { 
    $("#main-box")[this.checked ? "hide" : "show"](); 
    // as by @zerkms, this is a different way for writing it: 
    // $("#main-box").toggle(this.checked); 
} 
update.call($("#some-box").click(update)[0]); 

Per la maggior parte degli eventi è facile innescare solo una volta per l'inizializzazione, ma che non si applica qui - noi non vogliamo fare clic su (e il cambiamento) la casella di controllo automaticamente onload.

Answer 4

.toggle() accetta lo stato - così si potrebbe passare se mostrare o nascondere un elemento in una particolare chiamata:

$("#some-box").change(function(){ 
    $("#main-box").toggle($(this).is(':checked')); 
    }); 

$('#some-box').trigger('change'); 

PS: come si può vedere che sto proponendo di usare change evento invece di click

demo in linea: http://jsfiddle.net/R4Bjw/

Answer 5

(function($) { 
    var $somebox = $('#some-box'), 
     $mainbox = $('#main-box'); 

    var toggleMain = function() { 
     $mainbox.slideToggle(); 
    }; 

    if($somebox.is(':checked')) { 
     toggleMain(); 
    } 

    $somebox.on('click', toggleMain); 
})(window.jQuery); 

Ecco un violino: http://jsfiddle.net/FX7Du/4/