显示隐藏内容取决于是否选中了复选框

Question

我对jquery很新，所以我为自己迄今为止所想到的事情感到骄傲。我要做的是根据适当的复选框状态显示/隐藏选项列表。 Eveything工作正常，但我无法弄清楚如何检查是否在加载时检查复选框我知道我应该能够使用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

Answer 2

试试这个：

$("input[type=checkbox]:checked").each(fun....

Answer 3

要检查复选框是否已选中，您可以使用以下代码：

$(':checkbox').change(function() {
  if ( $(this).checked == true ){
     //your code here
   }

});