how to check if a checkbox is checked on page load, and if it does,then show a form?
<p>I am trying to <code>show()</code> a form if the checkbox is checked when the page load.  Currently, my checkbox does show that is checked when I refresh the page.  But, it doesn't show the <code>form</code> until you click twice, so if you click on the checkbox once it does uncheck it, then click one more time and the checkbox is checked and show the form.</p>

<p>Another issue is that I have 5 checkbox ID and 5 form classes and so I have 5 function doing the same thing.  My question is, how can I make one function to work with 5 different ID?</p>

<p>So, there are two question in one:</p>

<p>1)How to display the form is the checkbox is checked</p>

<p>2)How to convert my 5 functions into one function that does show the form depending on the ID passed.</p>

<p>PS: I have </p>

<pre><code>&lt;script src="https://code.jquery.com/jquery-2.1.0.min.js"&gt;&lt;/script&gt; 
&lt;script type="text/javascript" src="js/setting.js"&gt;&lt;/script&gt;
</code></pre>

<p>inside <code>&lt;head&gt;</code></p>

<p><strong>Here is the HTML (NOTE:  I will post only one <code>div</code> with one ID)</strong></p>

<pre><code>//This is the checkbox
&lt;div class="col-sm-6"&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="switch"&gt;

          &lt;input name="on_off" checked type="checkbox" id="bc1"  class="switch-input on-off"&gt;

        &lt;span class="switch-label" data-on="On" data-off="Off"&gt;&lt;/span&gt; &lt;span class="switch-handle"&gt;&lt;/span&gt; 
      &lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;

 //this is the form
&lt;form class="form-horizontal bc-details1" method="post" action="programs-controller.php" style="display:none" role="form"&gt;

  &lt;div class="col-sm-6"&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="control-label" &gt;Start Date:&lt;/label&gt;
      &lt;div class="input-width input-group date col-sm-10 date-picker"&gt;
          &lt;input placeholder="MM/DD/YYYY" type="text" style="height:30px; font-size:14px" class="form-control " name="start_date" /&gt;
          &lt;span class="input-group-addon" &gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/div&gt;    
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p><strong>setting.js</strong> </p>

<pre><code>$(document).ready(function(){



$('#bc1').change(function () {

    if (this.checked) {

    $('form.bc-details1').show();

}

else {

    $('form.bc-details1').hide();

}

});



$('#bc2').change(function () {

    if (this.checked) {

    $('form.bc-details2').show();

}

else {

    $('form.bc-details2').hide();

}

});


$('#bc3').change(function () {

    if (this.checked) {

    $('form.bc-details3').show();

}

else {

    $('form.bc-details3').hide();

}

});

$('form.bc4').change(function () {


    if (this.checked) {

    $('form.bc-details4').show();

}

else {

    $('form.bc-details4').hide();

}

});

$('#bc5').change(function () {

    if (this.checked) {

    $('form.bc-details5').show();

}

else {

    $('form.bc-details5').hide();

}

});

});
</code></pre>

<p>EDIT:  my forms are using classes and not ID...However, they have to use different id or class because they have different input and values</p>