Jquery .change on checkboxes im Array

Question

Dies ist eine asp.net-Webformularseite mit verschachtelten Gridviews.

Ich habe eine Tabelle, die dynamisch mehrere "Details" -Tabellen unter jeder Zeile hinzufügt. Die Detailtabelle hat ein "Alle auswählen" -Kästchen in einer Kopfzeile und ein Kontrollkästchen für jede darunter liegende Zeile.

Ich versuche alle Kontrollkästchen für untergeordnete Zeilen zu markieren, wenn das Kontrollkästchen für die Kopfebene aktiviert ist.

<div> 
<table class="details"> 
    <tbody> 
     <tr style="white-space:nowrap;"> 
      <th scope="col"> 
       <span class="ckbSelectAll"> 
        <input type="checkbox" /> 
       </span> 
      </th> 
      <th scope="col">number</th> 
      <th scope="col">Status</th> 
     </tr> 
     <tr> 
      <td> 
       <span class="ckbResults"> 
        <input type="checkbox" /> 
       </span> 
      </td> 
      <td>121223</td> 
      <td>Open</td> 
     </tr> 
    </tbody> 
</table> 

ich durch alle Kopfebene Kontrollkästchen (ckbSelectAll) auf der Suche für die Klasse und finden Sie das Kontrollkästchen finden. Ich sehe, dass ich ein Array aller Checkboxen auf der Kopfebene habe, aber die .change scheint auf keinem von ihnen zu feuern.

$.each($('.ckbSelectAll input[type="checkbox"]'),function (index, value) { 
$(value).change(function() { 
    alert('checked'); 
}) }); 

Ich dachte, es die .change sein könnte und ich habe versucht, mit .on (‚change‘, function() und .on (‚Klick‘, function(), sondern kann einfach nicht den Klick erhalten oder ändern Auslöser der Alarm

Answer 1

Es stellt sich heraus, dass mein Problem mit den Untertabellen war. Sie sind bei der Überprüfung der Seite sichtbar, werden jedoch erst angezeigt, wenn ein Benutzer sie erweitert. Ich benutzte das gleiche JavaScript, das ich in der Frage,

$.each($('.ckbSelectAll input[type="checkbox"]'),function (index, value) { $(value).change(function() { 
alert('checked'); }) }); 

habe, aber machte es eine Funktion, die auf erweitert aufgerufen wird.Dies schließt jetzt an die Selektoren an und alles funktioniert.

Answer 2

Dies wird am besten getan .each() und .prop() mit

Arbeitsbeispiel:.. https://jsfiddle.net/Twisty/6Lowt85a/

HTML

<table class="details"> 
    <thead> 
    <tr style="white-space:nowrap;"> 
     <th scope="col"> 
     <span class="ckbSelectAll"> 
     <input type="checkbox" /> 
     </span> 
     </th> 
     <th scope="col">number</th> 
     <th scope="col">Status</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <span class="ckbResults"> 
     <input type="checkbox" /> 
     </span> 
     </td> 
     <td>112233</td> 
     <td>Open</td> 
    </tr> 
    <tr> 
     <td> 
     <span class="ckbResults"> 
     <input type="checkbox" /> 
     </span> 
     </td> 
     <td>112234</td> 
     <td>Open</td> 
    </tr> 
    <tr> 
     <td> 
     <span class="ckbResults"> 
     <input type="checkbox" /> 
     </span> 
     </td> 
     <td>112235</td> 
     <td>Open</td> 
    </tr> 
    </tbody> 
</table> 

JavaScript

$(function() { 
    $(".ckbSelectAll input").change(function() { 
    var checked = $(this).is(":checked"); 
    $(".ckbResults input").each(function(index, elem) { 
     $(elem).prop("checked", checked); 
    }); 
    }); 
}); 

aktualisieren

Im Falle von mehreren Tabellen, würde ich so etwas wie dies raten:

$(function() { 
    $(".ckbSelectAll input").change(function() { 
    var checked = $(this).is(":checked"); 
    var parentTable = $(this).closest("table"); 
    parentTable.find(".ckbResults input").each(function(index, elem) { 
     $(elem).prop("checked", checked); 
    }); 
    }); 
}); 

Wenn das Kontrollkästchen in einem bestimmten Header wird angeklickt, die zugehörigen Checkboxen in Diese Tabelle wird aktiviert oder deaktiviert.

Answer 3

Sie können folgenden Code verwenden, auch wenn Sie in derselben Seite mehr als 1 Tisch haben, so stellen Sie sicher, dass die main checkbox haben ckbSelectAll Klasse:

$('.ckbSelectAll > input').on('change', function(){ 
    var $this = $(this); 
    $this.closest('thead') 
     .next() 
     .find('input[type=checkbox]') 
     .prop('checked', $this.is(':checked')); 
}); 

Beachten Sie, dass, wenn Sie einige Kontrollkästchen haben in tbody, die Sie don‘ t wollen Effekt mit Ihrem Code zu erhalten, fügen Sie einfach css-class-sub-checkboxes (ich meine Kontrollkästchen, die Sie brauchen, um zu überprüfen/deaktivieren Sie die Option mit main checkbox) und den Code wie folgt ändern:

$('.ckbSelectAll > input').on('change', function(){ 
    var $this = $(this); 
    $this.closest('thead') 
     .next() 
     .find('input[type=checkbox].my-class-name') 
     .prop('checked', $this.is(':checked')); 
}); 

jsfiddle