選擇在同一列

Question

我想實現類似的東西全部複選框Checking checkbox in column

我有兩個在表中選擇所有的複選框，並選擇一個會選擇同一列的所有複選框。

它是一個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); 
} 

有人可以幫助我嗎？

Answer 1

基本思路是選擇單元格，得到了指數，而且比選擇具有該索引的表格的其他表格單元格。

$("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>

如果你想與聯事件處理程序就像你有它這樣做，你的代碼看起來像

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

刪除點擊事件。而是將其與類綁定。

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

給要檢查

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

試試這個jQuery的類名：

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

Answer 3

那麼什麼@epascarello說，可能是更好的。

我只是有一個小建議，這將是找到複選框從同一個表本身否則最終會選擇在頁面中的所有表目前複選框：

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>

相關信息：

nth-child全選元素是他們父母的第n個孩子。

Fiddle Here