как посчитать чекбосы в колонке таблицы и записать значения в value у input
мне необходимо подсчитывать количество чекбоксов в колонке и выводить их в value у input
Источник: Stack Overflow на русском
мне необходимо подсчитывать количество чекбоксов в колонке и выводить их в value у input
Вот так это можно сделать
var nulls = document.getElementsByClassName("checkbox");
[...nulls].forEach(function (el) {
el.value = 0;
});
$("#tblRootCauseBody").on("change", "input[type=checkbox]", function () {
var index = $(this).closest("td").index() - 1;
var znak = this.checked ? 1 : -1
if (index) {
nulls[index - 1].value = Number(nulls[index - 1].value) + znak;
} else {
[...nulls].forEach(e => e.value = Number(e.value) - 1)
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="tblRootCauseBody">
<thead>
<tr>
<th>Name</th>
<th>Not done</th>
<th>Param1</th>
<th>Param2</th>
<th>Param3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Reeves</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>Reeves</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>Reeves</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>Reeves</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>Reeves</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>Reeves</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>Count checked</td>
<TD></TD>
<td class="count_cheked" bgcolor="#CCCCCC">
<input name="{TOTAL_SW}" id="TOTAL_SW" type="text" size="10"
maxlength="2" value="" class="checkbox"/>
<label class="btn" for="modal-TOTAL_SW" data-field="TOTAL_SW">
<div id="error-TOTAL_SW" class="divError"><span title="Input rules">?</span></div>
</label></td>
<td class="count_cheked" bgcolor="#CCCCCC">
<input name="{TOTAL_P}" id="TOTAL_P" type="text" size="10" maxlength="2"
value="" class="checkbox"/>
<label class="btn" for="modal-TOTAL_P" data-field="TOTAL_P]">
<div id="error-TOTAL_L" class="divError"><span title="Input rules">?</span></div>
</label></td>
<td class="count_cheked" bgcolor="#CCCCCC">
<input name="{TOTAL_L}" id="TOTAL_L" type="text" size="10" maxlength="2"
value="" class="checkbox"/>
<label class="btn" for="modal-TOTAL_L" data-field="TOTAL_L">
<div id="error-TOTAL_L" class="divError"><span title="Input rules">?</span></div>
</label></td>
</tr>
</tbody>
</table>