Question

I have this code that I want to a) run when the check box is checked. b) run on page load to see it needs to expand the section that is hidden by default.

$(document).ready(function () {
    $('#hasContractorFlag').on('change', function () {
        if ($(this).is(':checked')) {
            $('#hasContractor').show();
        } else {
            $('#hasContractor').hide();
        }
    });
});

I tried adding the load event to the above and it wasn’t being triggered.

I know I could do something similar to this and it would work:

$(document).ready(function () {
    noAddress($('#hasContractorFlag'))

    $('#hasContractorFlag').on('change', function () {
        noAddress($(this));
    });

    function noAddress(var field) {
        if ($(field).is(':checked')) {
            $('#hasContractor').show();
        } else {
            $('#hasContractor').hide();
        }
    };
});

What is the best approach to accomplish this?

Answer 1

If you add .change(); onto your method in the document ready, it will then call your method.

jsFiddle: http://jsfiddle.net/UQDaW/5/

$(document).ready(function () {
    $('#hasContractorFlag').on('change', function () {
        if ($(this).is(':checked')) {
            $('#hasContractor').show();
        } else {
            $('#hasContractor').hide();
        }
    }).change(); // .change() will execute this method
});