Using JavaScript check all boxes in one targeted webgrid

Question

Following instructions in this particular thread , I am able to add a Check All box to header of the column where check box shows up. It works perfectly for me but I have two tabs in the cshtml page below (MVC web page format) which presents two tabs with its own webgrid. The Check All Box javascript adds the box to both webgrids. I need to figure out how to just target the specific ONE webgrid (under the Unassigned tab in this case) to add the Check All box to the first column header.

A section from a cshtml file (I have five tabs with its own webgrid but I cut it to two to keep it brief):

<div class="tabbody">

@if (Page.Tab == "Incomplete")
{
    var grid = new WebGrid(Page.Incomplete, rowsPerPage: 10, defaultSort: "UserName", canSort: true);
    var tfooter = (Page.IncompleteCount > 0 ? Page.IncompleteCount : "No") + " Record" + (Page.IncompleteCount == 1 ? "" : "s") + " Found";
    var tpaging = @grid.Pager(mode: WebGridPagerModes.All, previousText: "previous", nextText: "next", numericLinksCount: 20);
    @grid.Pager(mode: WebGridPagerModes.All, previousText: "previous", nextText: "next", numericLinksCount: 20)
    @grid.Table(columns: grid.Columns(
        grid.Column("UserName", "User"),
        grid.Column("Column1", "Column1"),
        grid.Column("Column2", "Column2"),
        grid.Column("Column3", "Column3")),
    tableStyle: "simple", headerStyle: "hdr", rowStyle: "odd", alternatingRowStyle: "even", footer: @<div>@tfooter<br />@tpaging</div>)

}
@if (Page.Tab == "Unassigned")
{
    if (Page.UnassignedCount > 0)
{
    var grid = new WebGrid(Page.Unassigned, rowsPerPage: 10, defaultSort: "UserName", canSort: true, ajaxUpdateContainerId: "grid", ajaxUpdateCallback: "addCheck");
    @grid.Pager(mode: WebGridPagerModes.All, previousText: "previous", nextText: "next", numericLinksCount: 20)
    <div id="grid">
    @grid.GetHtml(columns: grid.Columns(
        grid.Column(format: @<text><input type="checkbox" name="UserId" value="@item.UserId" /></text>),
        grid.Column("Username", "User"),
        grid.Column("Column1", "Column1"),
            tableStyle: "simple", headerStyle: "hdr", rowStyle: "odd", alternatingRowStyle: "even", mode: WebGridPagerModes.All, previousText: "previous", nextText: "next", numericLinksCount: 20)
            </div>
</div>

Javascript:

<script type="text/javascript">
$(function () {
    addCheck();
});
function addCheck() {
    var $chk = $('<input/>').attr({ type: 'checkbox', name: 'chkAll', id: 'chkAll', title: "Select All" });
    $('th:first').append($chk);
    $('#chkAll').click(function () {
        $(':checkbox').prop('checked', $(this).is(':checked') ? true : false);
    });
    $(':checkbox').not('#chkAll').click(function(){
        testCheck();
        });
}
function testCheck() {
    if ($(':checkbox').not('#chkAll').filter(':not(:checked)').length === 0) {
        $('#chkAll').prop('checked', true);
    } else {
        $('#chkAll').prop('checked', false);
    }
}
</script>

Answer 1

I would recommend adding an identifier to your grid so that it can be selected as:

    $('#id th:first')

Alternatively, you should be able to select the correct table by the order they are on the page:

    $('table:eq(1) th:first')