Utilisation de JavaScript cochez toutes les cases dans un seul webgrid cible

Question

En suivant les instructions dans this particular thread, je suis en mesure d'ajouter une case Tout cocher à l'en-tête de la colonne où la case à cocher apparaît. Cela fonctionne parfaitement pour moi mais j'ai deux onglets dans la page cshtml ci-dessous (format de page web MVC) qui présente deux onglets avec son propre webgrid. Le javascript Check All Box ajoute la boîte aux deux webgrids. J'ai besoin de comprendre comment cibler le webgrid ONE spécifique (sous l'onglet Unassigned dans ce cas) pour ajouter la case Check All à l'en-tête de la première colonne.

Une section d'un fichier cshtml (j'ai cinq onglets avec sa propre webgrid mais je l'ai coupé à deux pour être bref):

<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

je recommanderais l'ajout d'un identifiant à votre réseau afin qu'il puisse être choisi comme:

$('#id th:first') 

Sinon, vous devriez b e est en mesure de sélectionner la table correcte par ordre dans lequel ils se trouvent sur la page:

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