计算表格列中选中的复选框的数量 [英] Count number of checkboxes checked in a table column
本文介绍了计算表格列中选中的复选框的数量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我现在正努力计算一栏中选中的复选框的数量. 我正在尝试对它们进行计数，并在底部显示总计. 我的html如下.还有很多列！
I am now struggling with counting number of checkboxes checked in a column. I am trying to count them and display a total at the bottom. My html is as follows. There are alot more columns!
<tr>
<th>Public Safety</th>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td></td>
</tr>
<tr>
<th>SSW/MS</th>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td>
<td></td>
</tr>
到目前为止，我的jquery:
And my jquery so far:
$('#tblRootCauseBody').on('change', 'input[type=checkbox]', function () {
$(" #tblRootCauseBody tr:not(:last-child) td:nth-child("+ (that.closest('td').index() - 1) + ")").each(function () {
$(this).html();
});
});
推荐答案
要获取:nth-child()的索引(索引从1开始)，您需要将.index()的值加1(从0开始)
To get the index of :nth-child()(index starts from 1), you need to add 1 to the value of .index()(starts from 0)
$('#tblRootCauseBody').on('change', 'input[type=checkbox]', function() {
var index = $(this).closest('td').index() + 1,
$checked = $(" #tblRootCauseBody tr:not(:last-child) td:nth-child(" + (index) + ") input:checked");
$('#tblRootCauseBody tr:last-child > :nth-child(' + index + ')').text($checked.length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id="tblRootCauseBody">
<tr>
<th>Public Safety</th>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td></td>
</tr>
<tr>
<th>SSW/MS</th>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td>
<div class="text-center">
<label class="checkbox-inline">
<input type="checkbox" class="chkRootCauseSummary" />
</label>
</div>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
这篇关于计算表格列中选中的复选框的数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
