javascript - 根据是否选中复选框显示隐藏内容

Question

我是 jquery 的新手，所以我为自己到目前为止所了解的东西感到自豪。我要做的是根据适当的复选框状态显示/隐藏选项列表。一切工作正常，但我不知道如何检查加载时是否选中复选框我知道我现在应该可以使用 is.checked 我有这个 javascript

    $('.wpbook_hidden').css({
    'display': 'none'
});
$(':checkbox').change(function() {
    var option = 'wpbook_option_' + $(this).attr('id');
    if ($('.' + option).css('display') == 'none') {
        $('.' + option).fadeIn();
    }
    else {
        $('.' + option).fadeOut();
    }
});

根据复选框的状态淡入和淡出类。这是我的 html

<input type="checkbox" id="set_1" checked> click to show text1
<p class = "wpbook_hidden wpbook_option_set_1"> This is option one</p>
<p class = "wpbook_hidden wpbook_option_set_1"> This is another option one</p>
<input type="checkbox" id="set_2"> click to show text1
<p class = "wpbook_hidden wpbook_option_set_2"> This is option two</p>

我遇到的两个问题是，.wpbook_hidden 类的内容总是隐藏的，如果在加载时选中该复选框，则内容应该加载。

如果有人能弄清楚如何检查负载箱的状态，那将非常有用，请随意使用这个 jfiddle http://jsfiddle.net/MH8e4/3/

Answer 1

您可以使用 :checked 作为选择器。像这样，

alert($(':checkbox:checked').attr('id'));

updated fiddle

或者如果你想检查一个特定复选框的状态，它会像这样

alert($('#set_1')[0].checked);

updated fiddle

---

对于下面的评论，我已经编辑了您的代码，现在看起来像这样。

$('.wpbook_hidden').hide();

$(':checkbox').change(function() {
    changeCheck(this);
});

$(':checkbox:checked').each(function(){ // on page load, get the checked checkbox.
    changeCheck(this); // apply function same as what is in .change()
});

function changeCheck(x) {
    var option = 'wpbook_option_' + $(x).attr('id');
    if ($('.' + option).is(':visible')) { // I'm not sure about my if here.
        $('.' + option).fadeOut();        // if necessary try exchanging the fadeOut() and fadeIn()
    }
    else {
        $('.' + option).fadeIn();
    }
}

# updated fiddle