Health Center Project

HTML

If image is a checkbox, program requires that item. If it is an X, it does not.  
<table class="checkTable">
        <tr> <!-- Table Header -->
            <td>
                
            </td>
            <td class="field">
                <form class="fieldCheck">
                    <input type="checkbox" id="Row1Chk" name="Row1" value="Row1" />
                </form> Programs
            </td>
            <td class="imageHeading">
                UDS
            </td>
            <td class="imageHeading">
                Meaningful Use
            </td>
            <td class="imageHeading">
                PCMH
            </td>
        </tr>

        <tr class="checkRow"> <!-- Row 1 -->
            <td>
                <form>
                    <input type="checkbox" name="Row1" value="Row1" onchange="onCheck();" class="subFieldCheck">
                </form>     
            </td>
            <td>
                Adult BMI Assessment
            </td>
            <td class="imageBox">
                <img  id="image1" src="no.png0" alt="Needed">
            </td>
            <td class="imageBox">
                <img id="image2" src="yes.png" alt="Needed">
            </td>
            <td class="imageBox">
                <img  id="image3" src="no.png" alt="Needed">
            </td>   
        </tr>
        <tr class="checkRow"> <!-- Row 2 -->
            <td>
                <form>
                    <input type="checkbox" name="Row2" value="Row2"  onchange="onCheck();" class="subFieldCheck">
                </form>     
            </td>
            <td>
                Childhood Immunization Status
            </td>
            <td class="imageBox">
                <img  src="yes.png" alt="Needed">
            </td>
            <td class="imageBox">
                <img  src="yes.png" alt="Needed">
            </td>
            <td class="imageBox">
                <img   src="no.png" alt="Needed">
            </td>   
        </tr>
        <tr...

CSS

.checkTable {
    border:hidden;
    
}

.field {
    font-weight:bold;    
}

.imageHeading {
    color:Grey;
}

.checkRow {
    
}

.imageBox {
    
}

.fieldCheck {
    display:inline;
}

.subFieldCheck {
    
}

JavaScript

$('#Row1Chk').on('change', function(event) {
    $('table.checkTable input[type=checkbox]').prop('checked', $(this).prop('checked'));
});

window.onCheck = function () {
    var totals = [0, 0, 0];
    $('tr.checkRow').each(function () {
        var $row = $(this);
        if ($row.children('td:first').find('input:checkbox').prop('checked')) {
            $(this).find('td.imageBox').each(function (index) {
                var $imageBox = $(this);
                if ($imageBox.children('img:first').attr('src').indexOf('yes') >= 0) {
                    ++(totals[index]);
                }
            });
        }
    });

    $('#total1').text(totals[0]);
    $('#total2').text(totals[1]);
    $('#total3').text(totals[2]);
};