jQuery - toggle does not fire on page reload
<p>i have this HTML.</p>

<pre><code>&lt;tr&gt;
    &lt;td width="75"&gt;Mon&lt;/td&gt;
    &lt;td class="bn_time" width="60"&gt;
        &lt;input id="mon_open" name="mon_open" class="time" placeholder="opening time" /&gt;
    &lt;/td&gt;
    &lt;td class="bn_time" width="10" align="center"&gt;-&lt;/td&gt;
    &lt;td class="bn_time" width="100"&gt;
        &lt;input id="mon_close" name="mon_close" class="time" placeholder="closing time" /&gt;
    &lt;/td&gt;
    &lt;td colspan="3" align="center" class="bn_holiday" hidden&gt;Holiday&lt;/td&gt;
    &lt;td&gt;
        &lt;input type="checkbox" name="mon_closed" id="mon_closed" class="bn_closed" /&gt;
        &lt;label for="mon_closed"&gt;Closed&lt;/label&gt;
    &lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>i am using this jQuery.</p>

<pre><code>$('.bn_closed').on('change', function() {
    var element = $(this);
    var id = element.attr('id');
    var day = id.slice(0,-7);
    var day_open = day+'_open';
    var day_close = day+'_close';
    var checked = element.is(':checked');
    var td = element.closest("td");
    td.siblings(".bn_time").toggle(!checked);
    td.siblings(".bn_holiday").toggle(checked);
});
</code></pre>

<p>to achieve the following.</p>

<pre><code>if($('.bn_closed').is(':checked')) {
     //hide all &lt;td&gt; element with class bn_time
     //show &lt;td&gt; element with class bn_holiday
} else {
    //show all &lt;td&gt; element with class bn_time
    //hide &lt;td&gt; element with class bn_holiday
}
</code></pre>

<p>this works with change event of <code>.bn_closed</code> however when the page is reloaded and if the element with class <code>.bn_closed</code> is checked. the toggling does not comes into effect. what i want is the toggling should take place in the event of page reload too. how do i go with it?</p>

<p>thank you</p>
