jquery选择下一个tbody所有行
我有下表：
<table class="js-table-sections js-table-checkable table table-hover">
<thead>
<tr>
<th class="text-center" style="width: 70px;">
<label class="css-input css-checkbox css-checkbox-primary remove-margin-t remove-margin-b">
<input type="checkbox" id="check-all" name="check-all"><span></span>
</label>
</th>
<th style="width: 30px;"></th>
<th>Name</th>
<th style="width: 15%;">Access</th>
<th class="hidden-xs" style="width: 15%;">Date</th>
</tr>
</thead>
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Jhon Smith</td>
<td>
<span class="label label-danger">Disabled</span>
</td>
<td class="hidden-xs">
<em class="text-muted">June 17, 2015 12:16</em>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $28,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 14, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $54,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 6, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $86,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 8, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $86,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 1, 2015 12:16</small>
</td>
</tr>
</tbody>
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Donald Barnes</td>
<td>
<span class="label label-primary">Personal</span>
</td>
<td class="hidden-xs">
<em class="text-muted">June 22, 2015 12:16</em>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $32,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 20, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $87,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 18, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $28,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 21, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $29,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 11, 2015 12:16</small>
</td>
</tr>
</tbody>
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Susan Elliott</td>
<td>
<span class="label label-warning">Trial</span>
</td>
<td class="hidden-xs">
<em class="text-muted">June 6, 2015 12:16</em>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $41,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 26, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $20,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 23, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $74,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 14, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $40,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 12, 2015 12:16</small>
</td>
</tr>
</tbody>
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Amy Hunter</td>
<td>
<span class="label label-success">VIP</span>
</td>
<td class="hidden-xs">
<em class="text-muted">June 22, 2015 12:16</em>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $32,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 11, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $37,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 3, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $66,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 4, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $76,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 2, 2015 12:16</small>
</td>
</tr>
</tbody>
</table>
该表有多个tbody。一个tbody是标题，下一个tbody包含数据行。标头tbody有一个类：js-table-sections-header。如何使用jquery检查tbody下标题tbody下的所有行？
如下图所示：
标题tbody包含如下名称：Jhon Smith等。当我单击该行的复选框时，我希望检查其下的所有其他行。
2 个答案:
答案 0 :(得分：2)
我用这个jquery代码得到了结果：
$(document).ready(function () {
$('input[class*="select-all"]').change(function () {
var this_tbody = $(this).closest('tbody');
$(this_tbody).next().find('input').prop('checked', $(this).is(':checked'));
});
$('#check-all').change(function () {
$(this).closest('table').find('input').prop('checked', $(this).is(':checked'));
});
});
请记住将名称（Donald Barnes等）的复选框类设置为class="select-all"。
答案 1 :(得分：1)
<强>更新：
你应该试试这个：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$( document ).ready(function() {
$("#check-all").on('click', function(e) {
var bool_check = false;
if($(this).is(":checked")) {
bool_check = true;
} else {
bool_check = false;
}
var checkboxes_list = $("tbody input[type='checkbox']");
//var checkboxes_list = total_inputs.find("tbody:first-child tr label.css-input input");
checkboxes_list.each(function(i) {
if(bool_check) {
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
}
});
});
$(".js-table-sections-header td label input").on('click', function(e) {
var bool_check = false;
if($(this).is(":checked")) {
bool_check = true;
} else {
bool_check = false;
}
var checkboxes_list = $(this).closest('tbody').next().find("input");
//var checkboxes_list = total_inputs.find("tbody:first-child tr label.css-input input");
checkboxes_list.each(function(i) {
if(bool_check) {
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="js-table-sections js-table-checkable table table-hover">
<thead>
<tr>
<th class="text-center" style="width: 70px;">
<label class="css-input css-checkbox css-checkbox-primary remove-margin-t remove-margin-b">
<input type="checkbox" id="check-all" name="check-all"><span></span>
</label>
</th>
<th style="width: 30px;"></th>
<th>Name</th>
<th style="width: 15%;">Access</th>
<th class="hidden-xs" style="width: 15%;">Date</th>
</tr>
</thead>
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Jhon Smith</td>
<td>
<span class="label label-danger">Disabled</span>
</td>
<td class="hidden-xs">
<em class="text-muted">June 17, 2015 12:16</em>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $28,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 14, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $54,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 6, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $86,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 8, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $86,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 1, 2015 12:16</small>
</td>
</tr>
</tbody>
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Donald Barnes</td>
<td>
<span class="label label-primary">Personal</span>
</td>
<td class="hidden-xs">
<em class="text-muted">June 22, 2015 12:16</em>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $32,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 20, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $87,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 18, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $28,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 21, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $29,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 11, 2015 12:16</small>
</td>
</tr>
</tbody>
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Susan Elliott</td>
<td>
<span class="label label-warning">Trial</span>
</td>
<td class="hidden-xs">
<em class="text-muted">June 6, 2015 12:16</em>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $41,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 26, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $20,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 23, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $74,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 14, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $40,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 12, 2015 12:16</small>
</td>
</tr>
</tbody>
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Amy Hunter</td>
<td>
<span class="label label-success">VIP</span>
</td>
<td class="hidden-xs">
<em class="text-muted">June 22, 2015 12:16</em>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $32,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 11, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $37,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 3, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $66,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 4, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $76,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 2, 2015 12:16</small>
</td>
</tr>
</tbody>
</table>
希望这有帮助！
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？