使用 jQuery 检查是否已在加载时检查复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16452033/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check if checkbox is ALREADY checked on load using jQuery
提问by user1945912
I am currently using
我目前正在使用
$("#some-box").click(function(){
$("#main-box").toggle();
});
Which works well, except for when the checkbox is part of a page that saves the checkboxes status. If a checkbox is saved as ticked, the main-box (which is revealed when the checkbox is clicked) is hidden on reload, and is only visible if the checkbox is clicked, which in now would mean "unticked" checkbox (as expected with the toggle).
效果很好，除非复选框是保存复选框状态的页面的一部分。如果复选框被保存为选中状态，则主框（单击复选框时显示）在重新加载时隐藏，并且仅在单击复选框时可见，这在现在意味着“未选中”复选框（如预期的那样）切换）。
How can I check on page load if the checkbox is already ticked, in which case to trigger the toggle automatically?
如果复选框已被勾选，如何检查页面加载，在这种情况下自动触发切换？
回答by carrabino
this should work:
这应该有效：
if ($("#some-box").is(':checked')){
$("#main-box").show();
}
回答by Bergi
You can get the initial state with .attr("checked")or .prop("defaultChecked"). However, I think the following is a better way:
您可以使用.attr("checked")或获取初始状态.prop("defaultChecked")。但是，我认为以下是更好的方法：
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]);
For most events it is easy to just trigger it once for initialisation, but that doesn't apply here - we don't want to click (and change) the checkbox automatically onload.
对于大多数事件，很容易只触发一次以进行初始化，但这不适用于此处 - 我们不想在加载时自动单击（并更改）复选框。
回答by zerkms
.toggle()accepts the state - so you could pass whether to show or hide an element on a particular call:
.toggle()接受状态 - 因此您可以在特定调用中传递是显示还是隐藏元素：
$("#some-box").change(function(){
$("#main-box").toggle($(this).is(':checked'));
});
$('#some-box').trigger('change');
PS: as you can see I'm proposing to use changeevent instead of click
PS：如您所见，我建议使用changeevent 而不是click
Online demo: http://jsfiddle.net/R4Bjw/
在线演示：http: //jsfiddle.net/R4Bjw/
回答by Ben Lee
Use is(':checked')to test and show the box if the checkbox is checked:
使用is(':checked')测试，并显示框，如果该复选框被选中：
if ($('#some-box').is(':checked')) {
$('#main-box').show();
}
And then use your click handler as-is.
然后按原样使用您的点击处理程序。
回答by Paul
(function($) {
var $somebox = $('#some-box'),
$mainbox = $('#main-box');
var toggleMain = function() {
$mainbox.slideToggle();
};
if($somebox.is(':checked')) {
toggleMain();
}
$somebox.on('click', toggleMain);
})(window.jQuery);
Here is a fiddle: http://jsfiddle.net/FX7Du/4/
这是一个小提琴：http: //jsfiddle.net/FX7Du/4/
