javascript - 使用 JavaScript 检查一个目标 webgrid 中的所有框

Question

按照 this particular thread 中的说明进行操作，我可以在显示复选框的列的标题中添加一个全选框。它非常适合我，但我在下面的 cshtml 页面(MVC 网页格式)中有两个选项卡，它显示了两个带有自己的 webgrid 的选项卡。 Check All Box javascript 将框添加到两个 webgrids。我需要弄清楚如何仅针对特定的 ONE webgrid(在本例中为“未分配”选项卡下)以将“全部选中”框添加到第一列标题。

cshtml 文件的一部分(我有五个带有自己的 webgrid 的选项卡，但我将其剪成两个以保持简短):

<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

我会建议在您的网格中添加一个标识符，以便它可以被选为:

    $('#id th:first')

或者，您应该能够按照它们在页面上的顺序选择正确的表:

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