Jquery 使用复选框选择表行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5430254/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Selecting Table Rows with Checkbox
提问by add9
I have a table as
我有一张桌子
<table id="rowclick2">
<tbody>
<tr >
<td class="cb"><input type="checkbox" value="yes"></td>
<td>row 1</td>
<td>A</td>
</tr>
<tr >
<td class="cb"><input type="checkbox" value="yes" ></td>
<td>row 2</td>
<td>B</td>
</tr>
<tr>
<td class="cb"><input type="checkbox" value="yes"></td>
<td>row 3</td>
<td>C</td>
</tr>
</tbody>
</table>
where I want to get each cell (when the button is clicked) in a row whose checkboxes are checked
我想在其中选中复选框的行中获取每个单元格（单击按钮时）
I tried filter
我试过过滤
$('#test').click(function(){
$('#rowclick2 tr').filter(':has(:checkbox:checked)').each(
//get row values
);
});
It's pretty simple yet I can't see what I am missing...
这很简单，但我看不到我错过了什么......
Hereis the jsfiddle link...
这是jsfiddle链接...
回答by jensgram
You're almost there :)
您快到了 ：）
If you want all <td>s in rows where the checkbox is checked:
如果您希望<td>选中复选框的行中的所有s：
$('#rowclick2 tr').filter(':has(:checkbox:checked)').find('td');
E.g.:
例如：
$('#rowclick2 tr').filter(':has(:checkbox:checked)').find('td').each(function() {
// this = td element
});
More elaborate exampleis on JsFiddle.
更详细的例子是关于 JsFiddle。
BTW
The .filter(':has(:checkbox:checked)')can be written as .has(':checkbox:checked')if you, like me, find that easier to read.
BTW
的.filter(':has(:checkbox:checked)')可以写成.has(':checkbox:checked')如果你像我一样，找到更容易阅读。
回答by SubniC
You can try this code:
你可以试试这个代码：
$('#test').click(function(){
$('td.cb:checked').parents('tr').each(
//get row values
);
}
HTH!
哼！
回答by Arpit Pithadia
// select row and check box function condition
$('#file_module_mainTableId').on('click', 'tbody tr', function(e){
//e.preventDefault();
var $this = $(this);
// Detecting ctrl (windows) / meta (mac) key.
if (e.ctrlKey || e.metaKey)
{
if($this.hasClass('ui-selected')){
$this.removeClass('ui-selected');
$this.find('input[type=checkbox]').removeAttr('checked');
if (e.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
}else{
$this.addClass('ui-selected')
$this.find('input[type=checkbox]').attr('checked', 'checked');
}
}
// Detecting shift key
else if (e.shiftKey)
{
// Get the first possible element that is selected.
var currentSelectedIndex = $('#file_module_mainTableId tbody tr.ui-selected').eq(0).index();
// Get the shift+click element
var selectedElementIndex = $('#file_module_mainTableId tbody tr').index($this);
// Mark selected between them
if (currentSelectedIndex < selectedElementIndex)
{
for (var indexOfRows = currentSelectedIndex; indexOfRows <= selectedElementIndex; indexOfRows++)
{
$('#file_module_mainTableId tbody tr').eq(indexOfRows).addClass('ui-selected');
$('#file_module_mainTableId tbody tr').eq(indexOfRows).find('input[type=checkbox]').attr('checked', 'checked');
}
}
else
{
for (var indexOfRows = selectedElementIndex; indexOfRows <= currentSelectedIndex; indexOfRows++)
{
$('#file_module_mainTableId tbody tr').eq(indexOfRows).addClass('ui-selected');
$('#file_module_mainTableId tbody tr').eq(indexOfRows).find('input[type=checkbox]').attr('checked', 'checked');
}
}
}
else
{
if (e.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
}
});
// checkbox class section
$(".chkbox").change(function(e){
if ($(this).is(":checked")){
$(this).closest('tr').addClass("ui-selected");
} else {
$(this).closest('tr').removeClass("ui-selected");
}
});
// clrt + A select all table row
$(document).on('keydown', function(e){
if(!$('body').hasClass('.modal-open')){ // use this condition for modal - deprecated here
if(e.metaKey || e.ctrlKey && e.keyCode == 65){
$('#file_module_mainTableId tbody tr').addClass('ui-selected');
$('#file_module_mainTableId tbody tr').find('input[type=checkbox]').attr('checked', 'checked');
e.preventDefault();
return false;
}
}
});
