@model IList<EnVisage.Models.SingleResQtiesOrCostByTimeModel.ExpenditureItem>
<script type="text/javascript">    
    function SelectAll(obj)
    {
        $.each($("input[type='checkbox'][id*='expCatCheckedId_']"), function (i, o)
        {
            o.checked = obj.checked;
            if (o.checked) {
                $(o).parent().parent().removeClass('unchecked');
            } else {
                $(o).parent().parent().addClass('unchecked');
            }
        });
    }
</script>

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="uom">
    <thead>
        <tr>
            <th style="width:30px;text-align: right;"><input type="checkbox" onclick="SelectAll(this);" /></th>
            <th>Select/Deselect All</th>
        </tr>
    </thead>
    <tbody>
        @{
            var GroupName = string.Empty;
        }
        @if (Model != null)
        {
            for (var i = 0; i < Model.Count; i++)
            {
                if (GroupName != Model[i].Group)
                {
                    <tr class="text-bold">
                        <td colspan="2">@Model[i].Group</td>
                    </tr>
                    {
                        GroupName = Model[i].Group;
                    }
                }
                <tr>
                    <td style="text-align: right;">
                        <input type="checkbox" value="@Model[i].Id" name="expCatCheckedId[@i]" id="expCatCheckedId_@Model[i].Id"/>
                    </td>
                    <td>@Model[i].Name</td>
                </tr>
            }
        }
    </tbody>
</table>