jQuery的。如果选中复选框,则检查onload并将css添加到div

时间:2013-10-26 12:56:25

标签: javascript jquery if-statement checkbox show-hide

我的问题

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

Demo

JS的第二部分工作(toogle),但我想首先检查复选框是否已选中并隐藏div或show。哪里有问题?

2 个答案:

答案 0 :(得分:1)

您可以使用.is()

if($('input.pokazkontakt').is(':checked'))

而不是if($('input.pokazkontakt').prop(':checked'))

Demo

答案 1 :(得分:1)

试试这个:

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:nonedisplay:block时,反向使用您的逻辑。
  • 使用.is检查已检查状态。
  • 使用.each迭代所有复选框

DEMO