我正在寻找解决方案,如何动态计算表格行中已选中的复选框,并将已检查的总和传递给另一个单元格。 有我的例子:
<table>
<thead>
<tr>
<th class='ptak'>X</th>
<th class='ptak'>X</th>
<th class='ptak'>X</th>
<th class='ptak'>X</th>
<th class='ptak'>X</th>
<th class='ptak'>X</th>
<th class='ptak'>X</th>
<th class='ptak'>X</th>
<th class='ptak'>X</th>
<th class='ptak'>X</th>
<th class='ptak'>Counter</th>
<th class='up'>Time</th>
<th class='name'>Match</th>
</tr>
</thead>
<tr>
<td class='a'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='b'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='c'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='d'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='e'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='f'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='g'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='h'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='i'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='j'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td style="text-align: center;">0</td>
<td class='up'><span class="table-matches__time">02:00</span></td>
<td class='up'>River Plate Ecuador vs Delfin</td>
</tr>
<tr>
<td class='a'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='b'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='c'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='d'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='e'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='f'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='g'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='h'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='i'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td class='j'>
<div><input type='checkbox' name='chkboxarray' class='ptaszek'></div>
</td>
<td style="text-align: center;">0</td>
<td class='up'><span class="table-matches__time">05:00</span></td>
<td class='up'>Warriors vs Home United</td>
</tr>
</table>
我每行有10个复选框和“计数器”单元格。 不知道如何分隔行中的复选框。
我找到了这个解决方案,但它无法在任何地方工作:
function submitFunction() {
alert("call countchecks");
countChecks();
alert("checkedsizes populated");
alert("continue with submit");
}
function countChecks() {
$('.authors-list tr').each(function() {
var count = 0;
var hdn = $(this).find('input[name^="checkedsizes"]');
count = $(this).find(':checkbox:checked').length;
hdn.val(count);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="authors-list">
<tr>
<td><input type="text" id="product1" name="product1" class="rounded" value="product1" /></td>
<td><input type="text" id="qty1" value='15' name="qty1" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h09_1" name="h09_1" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h12_1" name="h12_1" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h15_1" name="h15_1" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h18_1" name="h18_1" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h21_1" name="h21_1" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h24_1" name="h24_1" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h27_1" name="h27_1" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h30_1" name="h30_1" class="rounded" /></td>
<td><input type="text" name="checkedsizes_1" id="checkedsizes_1" value="0" /></td>
</tr>
<tr>
<td><input type="text" id="product2" name="product2" class="rounded" value="product2" /></td>
<td><input type="text" id="qty2" value='15' name="qty2" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h09_2" name="h09_2" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h12_2" name="h12_2" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h15_2" name="h15_2" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h18_2" name="h18_2" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h21_2" name="h21_2" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h24_2" name="h24_2" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h27_2" name="h27_2" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h30_2" name="h30_2" class="rounded" /></td>
<td><input type="text" name="checkedsizes_2" id="checkedsizes_2" value="0" size="5" /></td>
</tr>
<tr>
<td><input type="text" id="product3" name="product3" class="rounded" value="product3" /></td>
<td><input type="text" id="qty3" value='15' name="qty3" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h09_3" name="h09_3" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h12_3" name="h12_3" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h15_3" name="h15_3" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h18_3" name="h18_3" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h21_3" name="h21_3" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h24_3" name="h24_3" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h27_3" name="h27_3" class="rounded" /></td>
<td class="tdcheckbox"><input type="checkbox" id="h30_3" name="h30_3" class="rounded" /></td>
<td><input type="text" name="checkedsizes_3" id="checkedsizes_3" value="0" /></td>
</tr>
</table>
<input type="button" value="continue" onclick="submitFunction()">
感谢您的关注。