jQuery. Check onload if checkbox is checked and add css to div

Question

MY PROBLEM

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

2nd part of JS is working (toogle), but i want to check first if checkbox is checked and hide the div or show. Where is a problem?

Answer 1

You can use .is()

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

instead of if($('input.pokazkontakt').prop(':checked'))

Demo

Answer 2

Try this:

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

• Use your logic reversely when you set display:none and display:block .
• Use .is to check for checked state.
• Use .each to iterate all your checkboxes

DEMO