alle Kontrollkästchen, in der gleichen Spalte

Question

Ich versuche, etwas ähnliches zu Checking checkbox in column

zu implementieren Ich habe zwei alle Kontrollkästchen in einer Tabelle auswählen und die Auswahl eines all Kontrollkästchen der gleichen Spalte wählen würde.

Es ein ASP.NET GridView. Plunker

function CheckHeaderCheckboxAll(obj, gridname) {  
    var objId = obj.id; 
    var table= $(obj).closest('table'); 
    $('td input:checkbox',table).prop('checked',this.checked); 
} 

Kann mir bitte jemand helfen, mit dieser?

Answer 1

Grundidee ist es, die Zelle auszuwählen, erhalten den Index, und als die wählen andere Tabellenzellen der Tabelle mit diesem Index.

$("th input[type='checkbox']").on("change", function() { 
 
    var cb = $(this),   //checkbox that was changed 
 
     th = cb.parent(),  //get parent th 
 
     col = th.index() + 1; //get column index. note nth-child starts at 1, not zero 
 
    $("tbody td:nth-child(" + col + ") input").prop("checked", this.checked); //select the inputs and [un]check it 
 
});

th { background-color: #CCC; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     <input type="checkbox"> 
 
     </th> 
 
     <th> 
 
     <input type="checkbox"> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Wenn Sie es mit Inline-Event-Handler tun möchten, wie Sie es haben, würde der Code aussehen

function CheckHeaderCheckboxAll(obj) { 
    var cb = $(obj),   //checkbox that was changed 
     th = cb.parent(),  //get parent th 
     col = th.index() + 1; //get column index. note nth-child starts at 1, not zero 
    $("tbody td:nth-child(" + col + ") input").prop("checked", obj.checked); //select the inputs and [un]check it 
} 

Answer 2

Das On-Click-Ereignis entfernen. binden Sie es eher mit der Klasse.

<input type="checkbox" value="" class="checkAll" data-class="class1" name="checkAll" id="ctl00_UserMasterContentPlaceHolder_grdUserDetails_ctl01_chkHeaderCheckbox"/> 

Geben Sie den Namen der Klasse, die Sie

<input type="checkbox" value="" class="class1" /> 

Versuchen Sie, diese jquery überprüfen möchten:

$(".checkAll").click(function() { 
    var datacls = $(this).attr('data-class'); 
    $('input:checkbox.'+datacls).not(this).prop('checked', this.checked); 
}); 

Answer 3

gut, was @epascarello sagte wahrscheinlich besser ist.

Ich habe nur eine kleine Anregung und dass finden Sie die Kontrollkästchen aus derselben Tabelle selbst sonst wäre es Kontrollkästchen in allen der Seite der Tabellen Auswahl am Ende wäre:

function SelectAll(obj) { 
 

 
    // find the index of column 
 
    var table = $(obj).closest('table'); // find the current table 
 
    var th_s = table.find('th'); // find/get all the <th> of current table 
 
    var current_th = $(obj).closest('th'); // get current <th> 
 

 
    // the value of n is "1-indexed", meaning that the counting starts at 1 
 
    var columnIndex = th_s.index(current_th) + 1; // find index of current <th> within list of <th>'s 
 

 
    console.log('The Column is = ' + columnIndex); // print the index for testing 
 

 
    // select all checkboxes from the same column index of the same table 
 
    table.find('td:nth-child(' + (columnIndex) + ') input').prop("checked", obj.checked); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th> 
 
     <input type="checkbox" onclick="SelectAll(this)" /> 
 
    </th> 
 
    <th>Name</th> 
 
    <th> 
 
     <input type="checkbox" onclick="SelectAll(this)" />Is Active</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td>John</td> 
 
    <td> 
 
     <input type="checkbox" name="isActive" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td>Tim</td> 
 
    <td> 
 
     <input type="checkbox" name="isActive" /> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<br/> 
 
<h2> 
 
Another Table<hr/> 
 
</h2> 
 
<table> 
 
    <tr> 
 
    <th> 
 
     <input type="checkbox" onclick="SelectAll(this)" /> 
 
    </th> 
 
    <th>Name</th> 
 
    <th> 
 
     <input type="checkbox" onclick="SelectAll(this)" />Is Active</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td>John</td> 
 
    <td> 
 
     <input type="checkbox" name="isActive" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td>Tim</td> 
 
    <td> 
 
     <input type="checkbox" name="isActive" /> 
 
    </td> 
 
    </tr> 
 
</table>

Für Referenz:

nth-child Wählt alle Elemente, die das N-Kind ihres Elternteils sind.

Fiddle Here