Kiểm tra nếu hộp kiểm đã được kiểm tra trên tải sử dụng jQuery

Question

Tôi hiện đang sử dụng

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

nào hoạt động tốt, trừ khi hộp kiểm là một phần của một trang mà tiết kiệm tình trạng hộp kiểm. Nếu hộp kiểm được lưu khi được chọn, hộp chính (được hiển thị khi hộp kiểm được nhấp vào) bị ẩn khi tải lại và chỉ hiển thị nếu hộp kiểm được nhấp vào, hộp kiểm hiện tại có nghĩa là hộp kiểm "không được" (như mong đợi chuyển đổi).

Làm cách nào để kiểm tra tải trang nếu hộp kiểm đã được chọn, trong trường hợp nào để kích hoạt tự động chuyển đổi?

Answer 1

này nên làm việc:

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

Answer 2

Sử dụng is(':checked') để kiểm tra và hiển thị các hộp nếu hộp kiểm được kiểm tra:

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

Và sau đó sử dụng bộ xử lý nhấp chuột của bạn như nó vốn có.

Answer 3

Bạn có thể nhận trạng thái ban đầu với .attr("checked") hoặc .prop("defaultChecked"). Tuy nhiên, tôi nghĩ rằng đây là một cách tốt hơn:

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]); 

Đối với hầu hết các sự kiện nó rất dễ dàng chỉ cần kích hoạt nó một lần cho khởi động, nhưng điều đó không áp dụng ở đây - chúng tôi không muốn để bấm (và thay đổi) hộp kiểm tự động tải lên.

Answer 4

.toggle() chấp nhận nhà nước - vì vậy bạn có thể vượt qua cho dù để hiển thị hoặc ẩn một yếu tố trên một cuộc gọi cụ thể:

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

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

PS: như bạn có thể thấy tôi đang đề xuất sử dụng change sự kiện thay vì click

bản demo online: 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); 

Đây là một fiddle: http://jsfiddle.net/FX7Du/4/