Jquery: Select all check boxes when 'select all' is checked

I have a form that prints a out menu items from each category. I want to have a select all checkbox over each category such that when clicked, all checkboxes of that category are selected.

Issue: Sometimes some check boxes are not checked by default e.g. no data in database - in that case the select all checkbox should not be checked when page is rendered (it should only checked if all its child check boxes are checked).

Current partial implementation (checked is true for select all even if some of its some menu items are not checked?!):

  <form method="post">
        <table class="report">
            <br />
            <tr>
                <th colspan='2'></th>
                <th colspan='2'></th>            
                <th colspan='2'></th>            
            </tr>
            <tr>
                <th colspan='2'>Cats</th>
                <th colspan='2'>Available</th>
                <th colspan='2'><input id="Cats" class="all"  type="checkbox" checked="true"  /> </th>

            </tr>
            <tr>
                <td colspan='2'>Cat 1</td>
                 <td colspan='2'><input name="Cats,cat1" class="Cats-item" type="checkbox"  checked="true"/></td>
             </tr>   
            <tr>
                <td colspan='2'>Cat 2</td>
                 <td colspan='2'><input name="Cats,cat2" class="Cats-item" type="checkbox"  checked="true"/></td>
             </tr>   
            <tr>
                <td colspan='2'>Cat 3</td>
                 <td colspan='2'><input name="Cats,cat3" class="Cats-item" type="checkbox"  checked="true"/></td>
             </tr>                
        </table>
        <table class="report">
            <br />
            <tr>
                <th colspan='2'></th>
                <th colspan='2'></th>            
                <th colspan='2'></th>            
            </tr>
            <tr>
                <th colspan='2'>Dogs</th>
                <th colspan='2'>Available</th>
                <th colspan='2'><input id="Dog Big" class="all"  type="checkbox" checked="true"  /> </th>

            </tr>
            <tr>
                <td colspan='2'>Dog 1</td>
                 <td colspan='2'><input name="Dogs,dogs1" class="Dog Big-item" type="checkbox"  checked="true"/></td>
             </tr>   
            <tr>
                <td colspan='2'>Dog 2</td>
                 <td colspan='2'><input name="Dogs,dogs2" class="Dog Big-item" type="checkbox"  checked="true"/></td>
             </tr>   
            <tr>
                <td colspan='2'>Dog 3</td>
                 <td colspan='2'><input name="Dogs,dogs3" class="Dog Big-item" type="checkbox"  checked="true"/></td>
             </tr>                
        </table>

          <input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>


<script type="text/javascript">
    
    checked = true;
    
    $(".all").click(function() {
        
        checked = !checked;

        var selectid = this.id.replace(/ /g, '');
        console.log("====>>>" + selectid);
        var item = `${selectid}-item`;
        console.log("===<<<" + item)

        var checkElements = $(`.${selectid}-item`).prop('checked', checked);
 
        
        $(selectid+"-item").prop('checked', !checked);
    })
</script>