Aktivieren und Deaktivieren von Kontrollkästchen mit dynamischen IDs und Klasse mit jquery

Question

Ich habe ein Raster, das Gruppierung hat, d. H. Das Raster zeigt Produkte der Gruppe. Die Struktur hat also Group und ihre Childs. Ich werde einige andere Gruppen und deren Kinder haben, an die ich mich wie unten gebunden habe. Ich möchte die gesamte Unterliste beim Klick auf Eltern aktivieren und deaktivieren.

CSHTML 
@{ 
    if (Model.List.Count() > 0) 
    { 
    <table> 
     <tr> 
       <input type="checkbox" class="cls@(obj.GroupId)" name="@obj.GroupId" onclick="checkUncheckAll(this.class)" /> 
      <td>Name</td> 
      </tr> 
     @foreach (var obj in Model.subList) 
     { 
      <tr> 
       <td> 
        <input type="checkbox" class="cls@(obj.GroupId)" name="@obj.GroupId" /></td> 
       </td> 
       <td> 
        @obj.Name 
       </td> 
      </tr> 
    </table> 
    } 
} 


<input type="button" value="Save" onclick="PickAllCheckedRows();" /> 

Ich habe versucht, dies wie unten zu tun, aber keinen Erfolg. Außerdem möchte ich alle überprüfte Gruppe und ihre Unterpunkte beim Klicken auf Speichern auswählen. Jede Hilfe würde wirklich geschätzt werden.

<script type="text/javascript"> 
    function checkUncheckAll(sender) { 
     alert(sender); 
     var chkElements = document.getElementsByClassName('chkItems'); 
     for (var i = 0; i < chkElements.length; i++) { 
      chkElements[i].checked = sender.checked; 
     } 
    } 

    function PickAllCheckedRows() { 
} 
</script> 

Answer 1

Du nennst Ihre Funktion in undefined vorbei, weil Sie vorbei this.class:

onclick="checkUncheckAll(this.class)" 

Elemente haben keine class Eigenschaft (sie className haben), und wenn sie es taten, Sie möchten nicht die Klasse übergeben, Sie möchten das Element selbst übergeben, da Sie es als sender.checked verwenden.

Entfernen Sie einfach die .class aus dem Anruf.

Wenn Sie versuchen, alle innerhalb einer Gruppe zu tun, dann müssen Sie className in der Funktion verwenden, wenn die anderen Kontrollkästchen immer aktivieren/deaktivieren:

function checkUncheckAll(sender) { 
    var chkElements = document.getElementsByClassName(sender.className); 
    // Note ------------------------------------------------^^^^^^^^^^ 
    for (var i = 0; i < chkElements.length; i++) { 
     if (chkElements[i] !== sender) {    // Not strictly necessary I guess, but... 
      chkElements[i].checked = sender.checked; 
     } 
    } 
} 

Das setzt voraus, Sie‘ Ich habe immer nur eine einzige Klasse in den Checkboxen "Alle".