Setting Visibility on HTML Page Load

I have created an HTML page that has some code in it that hides all the rows in a table except for the header row based on a checkbox status. (only showing one table in code example) There are multiple tables all controlled by their own checkbox. If the checkbox is checked then the table's rows are visible, if it is not checked, the table's row are hidden.

What I would like to have happen is when the page loads if the checkboxes are unchecked (which is typical) then I would like the rows of the corresponding tables to be hidden.

Currently when the page loads the boxes are generally unchecked, but the rows are still visible. Clicking and un-clicking the checkbox hides the rows.

I am guessing (emphasis on guessing) that this issue is related the script code that uses the .change function of the checkbox and at page load that event is not fired.

Is there a way to capture the checkbox status at page load and apply the correct visibility to the rows pertaining to that checkbox? Is there an elegant solution to look at all checkboxes as the page load occurs? I spent quite a bit of time looking for this on SO but with not luck.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    <!-- HIDES/SHOWS SUPPLIERS & MATERIAL SECTION OF THE ECN-->
    $(document).ready(function() {
      $('#HideAllSupplierRows').change(function() {
        if (!this.checked)
          $('.AllSupplierRows').fadeOut(300);
        else
          $('.AllSupplierRows').fadeIn(300);
      });
     });
      </script>

    <table border="1" style="width: 900px; height: 40px;">
    <tbody>
    <tr style="height: 23px;">
    <td style="height: 23px; background-color: #11d6d0;" width: 478px; colspan="2"><span style="color: #000000;"> <strong> Suppliers &amp; Material</strong></span></td>
    <td style="width: 257px; background-color: #11d6d0; text-align: center;"><input type="checkbox" id="HideAllSupplierRows" /></td>
    </tr>
    <tr style="height: 22px;" class="AllSupplierRows">
    <td style="width: 40px; vertical-align: top; height: 22px;" td="">&nbsp; <input name="DV" type="checkbox" /></td>
    <td style="width: 695px; height: 21px;" colspan="2">&nbsp;Lead Times / Material Planning</td>
    </tr>
    <tr style="height: 22px;" class="AllSupplierRows">
    <td style="width: 40px; vertical-align: top; height: 22px;" td="">&nbsp; <input name="DV" type="checkbox" /></td>
    <td style="width: 695px; height: 21px;" colspan="2">&nbsp;Order Parts</td>
    </tr>
    <tr style="height: 22px;" class="AllSupplierRows">
    <td style="width: 40px; vertical-align: top; height: 22px;" td="">&nbsp; <input name="DV" type="checkbox" /></td>
    <td style="width: 695px; height: 21px;" colspan="2">&nbsp;Supplier Qualifications</td>
    </tr>
    </table>
    <p></p>