Javascript jQuery。如果选中复选框，则选中onload并将css添加到div

我的问题

jQuery(document).ready(function () {

if ($('input.pokazkontakt').prop(':checked')) {
    $(this).parent().nextAll('.pkbox:first').css('display', 'block');
} else {
    $(this).parent().nextAll('.pkbox:first').css('display', 'none');
}

$('input.pokazkontakt').click(function () {
    $(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});

JS的第二部分正在工作（toogle），但我想首先检查复选框是否被选中，并隐藏div或show。哪里有问题？

您可以使用

而不是

if（$（'input.pokazkontakt'）.prop（':checked'））

试试这个：

jQuery(document).ready(function () {

    $('input.pokazkontakt').each(function(){
        if ($(this).is(':checked')) {
            $(this).parent().nextAll('.pkbox:first').css('display', 'none');
        } else {
            $(this).parent().nextAll('.pkbox:first').css('display', 'block');    
        }
    });

    $('input.pokazkontakt').click(function () {
        $(this).parent().nextAll('.pkbox:first').toggle('fast');
    });
});

• 设置

  display:none

  和

  display:block

  时，反向使用逻辑
• 使用

  .is

  检查已检查状态
• 使用

  .each

  迭代所有复选框

---

您的演示不起作用。选中第2和第3复选框后，div仍然可见。

jQuery(document).ready(function () {

    $('input.pokazkontakt').each(function(){
        if ($(this).is(':checked')) {
            $(this).parent().nextAll('.pkbox:first').css('display', 'none');
        } else {
            $(this).parent().nextAll('.pkbox:first').css('display', 'block');    
        }
    });

    $('input.pokazkontakt').click(function () {
        $(this).parent().nextAll('.pkbox:first').toggle('fast');
    });
});