javascript – 显示隐藏内容,具体取决于是否选中了复选框

我对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/

解决方法:

你可以使用：选中作为选择器.像这样,

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

标签：jquery,javascript,checkbox,show-hide
来源： https://codeday.me/bug/20190621/1257278.html