Jquery Funktionen für Operationen auf Gridview mit Checkboxen

Question

Die erste Spalte in meiner Gridview (gvAvailable) ist eine Checkbox-Spalte "chkSelect". Die Art, wie es jetzt funktioniert, ist, dass ein Benutzer mehrere Checkboxen auf einer Gridview überprüfen kann, aber ich möchte, dass eine jquery Funktion alle Checkboxen in der Gridview deaktiviert, außer für das angekreuzte Kontrollkästchen.

Ich war auch auf der Suche nach einer Möglichkeit, die Spalten der geprüften Zeile mit jquery auf einen Klick auf die Schaltfläche zugreifen.

Vielen Dank für jede Hilfe

Hier ist, wie die generierten HTML

<table class="Grid" cellspacing="0" border="0" id="gvAvailable" style="width:99%;border-collapse:collapse;"> 
<tr class="GridHeader"> 
<th scope="col">&nbsp;</th><th scope="col">Guid</th><th scope="col">Id</th><th scope="col">Name</th> 
    <th scope="col">Facility</th><th scope="col">Room</th> 
</tr> 
<tr class="GridItem"> 
    <td> 
     <input id="gvAvailable_ctl02_chkSelect" type="checkbox" name="gvAvailable$ctl02$chkSelect" /> 
    </td> 
    <td>24</td> 
    <td>000101020201</td> 
    <td>Test</td> 
    <td>Test Facility</td> 
    <td>&nbsp;</td> 
</tr><tr class="GridAltItem"> 
<td> 
    <input id="gvAvailable_ctl03_chkSelect" type="checkbox" name="gvAvailable$ctl03$chkSelect" /> 
</td> 
<td>25</td> 
<td>1001</td> 
<td>Test 2</td> 
<td>Test 3</td> 
<td>&nbsp;</td> 
</tr> 
</table> 

Answer 1

wenn Sie fügen die gleiche Klasse zu jedem der Kontrollkästchen in der Markup hinzu, können Sie ein Array von ihnen abrufen, indem Sie sagen

$('.classname') 

Dadurch erhalten Sie das Array der Objekte zurück. Sie können dann "each" auf dem Array aufrufen und alle abwählen.

$('.classname').each(function() 
{ 
    $(this).click(function() 
    { 
     removeChecks(); 
     $(this).attr('checked', 'checked'); 
    }); 
}); 

der obige Code sollte eingerichtet werden, läuft auf Seite laden:

function removeChecks() 
{  
    $('.classname').each(function() 
    { 
     $(this).removeAttr('checked'); 
    }); 
} 

Dann den obigen Funktionsaufruf in dem Click-Handler für die einzelne Kontrollkästchen hinzuzufügen.

Answer 2

i this sieht articale sehr nützlich Aktivieren/Deaktivieren gefunden Alle Artikel in einer ASP.NET Checkboxliste jQuery

mit

Answer 3

Ich nehme an, Sie möchten sicherstellen, dass der Benutzer geklickt Checkboxen nicht umgeschaltet werden? Wenn ja, gehe weiter unten.

Geben Sie zunächst allen Kontrollkästchen in der Gridview einen Klassennamen.

Wenn ein Kontrollkästchen angeklickt wurde, fügen Sie eine weitere Klasse hinzu, um anzuzeigen, dass es physisch ausgewählt wurde.

$('.checkbox').click(function(){ 
    $(this).addClass('checked'); 
}); 

Nun, wenn ein Benutzer auf das Kontrollkästchen Alle auswählen klickt (nennen wir es „selectAll“) an der Spitze, durchlaufen alle Kontrollkästchen und den Status wechseln, während die Überprüfung der „geprüft“ Klasse

$('#selectAll').click(function(){ 
    var status = $(this).attr('checked') 
    $('.checkbox').each(function(){ 
     //only toggle if not set 
     if(!$(this).hasClass('checked')){ 
     if(status){ 
      $(this).attr('checked', 'checked'); 
     } 
     else{ 
      $(this).attr('checked', ''); 
     } 
     } 
    }); 
}); 

Das sollte dich hoffentlich auf deinen fröhlichen Weg bringen.

Zugriff auf Spalten der geprüften Zeile?

You could add an onclick event to each table row. 
$('#tablename tr').click(function(){ 
    //do something 
}); 

Answer 4

In diesem Beispiel habe ich eine Taste legen, um zu überprüfen, und eine Taste gridview Kontrollkästchen zu deaktivieren:

<asp:GridView runat="server" ID="grid"></asp:GridView> 

<input type="button" onclick="uncheckCheckBoxes()" value="UnCheck" /> 
&nbsp; 
<input type="button" onclick="checkCheckBoxes()" value="Check" /> 

<script> 
    function uncheckCheckBoxes() 
    { 
     var gridClientID = '<%= grid.ClientID %>'; 
     jQuery.each($("#" + gridClientID + " input[type='checkbox']"), function() 
     { 
      this.checked = false; 
     }); 
    } 

    function checkCheckBoxes() 
    { 
     var gridClientID = '<%= grid.ClientID %>'; 
     jQuery.each($("#" + gridClientID + " input[type='checkbox']"), function() 
     { 
      this.checked = true; 
     }); 
    } 
</script>