2016-09-14 74 views
0

我想实现类似的东西全部复选框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); 
} 

有人可以帮助我吗?

+0

是'obj'已选中该复选框? – epascarello

+0

'这个'这里没有提到 – Chax

+0

是@epascarello。该obj是复选框检查 – Surabhi

回答

2

基本思路是选择单元格,得到了指数,而且比选择具有该索引的表格的其他表格单元格。

$("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 
} 
+0

谢谢。我试图编写'$(“tbody td:nth-​​child(”+ col +“)input”)。prop(“checked”,obj.checked);'从这个答案[如何检查 - 取消选中所有复选框](http://stackoverflow.com/a/17814273/769678),但得到语法错误。我现在明白了。 – Surabhi

0

删除点击事件。而是将其与类绑定。

<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); 
}); 
0

那么什么@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