Pass checked checkboxes to next or previous pages in webgrid

I created a webgrid with checkbox in a column. I also added a checkall box per instructions in this article. Now, I need to figure out how to pass checked checkboxes through pagination in the webgrid. Obviously, I need to tweak Javascript to make this work. Thanks.

from a cshtml file:

var grid = new WebGrid(Page.ListofUserDocument, rowsPerPage: 10, defaultSort: "UserName", canSort: true, ajaxUpdateContainerId: "grid", ajaxUpdateCallback: "addCheck");
    @grid.Pager(mode: WebGridPagerModes.All, previousText: "previous", nextText: "next", numericLinksCount: 20)
    <div id="gridCheckbox1">
    @grid.GetHtml(columns: grid.Columns(
        grid.Column(format: @<text><input type="checkbox" id="UserIdCheckbox" name="UserIdCheckbox" value="@item.UserId" /></text>),
        grid.Column("Username", "User"),
        grid.Column("DocumentName", "Document Name", format: @<div class="w500">@HH.TruncateString(@item.DocumentName, 150)</div>)),
            tableStyle: "simple", headerStyle: "hdr", rowStyle: "odd", alternatingRowStyle: "even", mode: WebGridPagerModes.All, previousText: "previous", nextText: "next", numericLinksCount: 20)
    </div>

Javascript:

<script type="text/javascript">
$(function () {
    addCheck();
});
function addCheck() {
    var $chk = $('<input/>').attr({ type: 'checkbox', name: 'chkAll', id: 'chkAll', title: "Select All" });
    $('#gridCheckbox1 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);
    }
}