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

Question

我对 jquery 还很陌生，所以我为自己到目前为止所掌握的知识感到自豪。我想做的是根据适当的复选框状态显示/隐藏选项列表。一切都工作得很好，但我不知道如何检查加载时是否选中了复选框我知道我现在应该能够使用 is.checked 我有这个

    $('.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();
    }
});

javascript根据复选框的状态淡入和淡出一个类。这是我的 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'));

更新的小提琴

或者如果你想检查特定复选框的状态，这将是 一样

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

更新的小提琴

---

就像下面的评论的

$('.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();
    }
}

，我已经编辑了你的代码，现在看起来像这样。 #更新了小提琴

Answer 2

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

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

});

Answer 3

试试这个：

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