我正在处理基于根据该行中的图像是否是正确图像来检查复选框时更新总行的代码。 这是HTML：
<table border="1">
<tr> <!-- Table Header -->
<td>
Checkbox
</td>
<td>
Items
</td>
<td>
Area 1
</td>
<td>
Area 2
</td>
<td>
Area 3
</td>
</tr>
<tr id="checkRow"> <!-- Row 1 -->
<td>
<form>
<input type="checkbox" name="Row1" value="Row1" onchange="onCheck(this);">
</form>
</td>
<td>
Item 1
</td>
<td class="imageBox">
<img id="image1" src="yes.png" alt="Needed">
</td>
<td class="imageBox">
<img id="image2" src="yes.png" alt="Needed">
</td>
<td class="imageBox">
<img id="image3" src="no.png" alt="Needed">
</td>
</tr>
<tr> <!-- Row 2 -->
<td>
<form>
<input type="checkbox" name="Row2" value="Row2" onchange="onCheck(this);">
</form>
</td>
<td>
Item 2
</td>
<td class="imageBox">
<img src="yes.png" alt="Needed">
</td>
<td class="imageBox">
<img src="yes.png" alt="Needed">
</td>
<td class="imageBox">
<img src="no.png" alt="Needed">
</td>
</tr>
<tr> <!-- Row 3 -->
<td>
<form>
<input type="checkbox" name="Row3" value="Row3" onchange="onCheck(this);">
</form>
</td>
<td>
Item 3
</td>
<td class="imageBox">
<img src="yes.png" alt="Needed">
</td>
<td class="imageBox">
<img src="yes.png" alt="Needed">
</td>
<td class="imageBox">
<img src="yes.png" alt="Needed">
</td>
</tr>
<tr> <!-- Row 4 -->
<td>
<form>
<input type="checkbox" name="Row4" value="Row4" onchange="onCheck(this);">
</form>
</td>
<td>
Item 4
</td>
<td class="imageBox">
<img src="yes.png" alt="Needed">
</td>
<td class="imageBox">
<img src="yes.png" alt="Needed">
</td>
<td class="imageBox">
<img src="no.png" alt="Needed">
</td>
</tr>
<tr id="outputRow"> <!-- Table Bottom -->
<td>
<!--Empty-->
</td>
<td>
Summation
</td>
<td id="total1">
0
</td >
<td id="total2">
0
</td>
<td id= "total3">
0
</td>
</tr>
</table>
这是Javascript（使用jQuery）
//Numbers in the total row (Summation)
var total1=0;
var total2=0;
var total3=0;
function onCheck(cb)
{
var $box = $(cb);
var imageBoxes = $box.parents('td.imageBox');
if(cb.checked===true)
{
//Checks the image in the row. If it is yes.png, it adds 1 to to the total
//for that column and displays that total variable in the total row.
/*if(document.getElementById('image1').src.toString().indexOf('yes')>0){
total1++;
document.getElementById('total1').innerHTML=total1;
} */
if(imageBoxes[0].children().attr('src').toString().indexOf('yes')>0){
total1++;
document.getElementById('total1').innerHTML=total1;
}
/*else
{
document.getElementById('total1').innerHTML=no;
} */
if(document.getElementById('image2').src.toString().indexOf('yes')>0){
total2++;
document.getElementById('total2').innerHTML=total2;
}
/* else
{
document.getElementById('total2').innerHTML=no;
} */
if(document.getElementById('image3').src.toString().indexOf('yes')>0){
total3++;
document.getElementById('total3').innerHTML=total3;
}
/*else
{
document.getElementById('total3').innerHTML=no;
} */
}
//If the checkbox is unchecked, this checks for
//if the image in each box in that row is
//yes.png. If it is, then 1 is subtracted from the
//column's total and the new total is shown.
else
{
if(document.getElementById('image1').src.toString().indexOf('yes')>0){
total1--;
document.getElementById('total1').innerHTML=total1;
}
if(document.getElementById('image2').src.toString().indexOf('yes')>0){
total2--;
document.getElementById('total2').innerHTML=total2;
}
if(document.getElementById('image3').src.toString().indexOf('yes')>0){
total3--;
document.getElementById('total3').innerHTML=total3;
}
}
}
我在Fiddle中构建了这个，因此不会显示所有脚本导入。
编辑：这是小提琴的链接：hhttp：//jsfiddle.net/GGxpX/62/ 编辑：有人指出我的Id正在重复。我把它固定在新的小提琴中，但这并没有解决问题。 编辑3：修复了更多问题，包括使用td元素作为其图像子元素。该链接现在指向更新的小提琴。 EDIT4：再次更新了小提琴。
答案 0 :(得分：0)
如果我理解你想要的东西，我认为你让它变得比它需要的更复杂。 （如果我错了，请纠正我。）我会让复选框的处理程序每次都重新计算总数。
JavaScript可能就是这么简短：
function onCheck() {
var totals = [0, 0, 0];
$('tr.checkRow').each(function () {
var $row = $(this);
if ($row.children('td:first').find('input:checkbox').prop('checked')) {
$(this).find('td.imageBox').each(function (index) {
var $imageBox = $(this);
if ($imageBox.children('img:first').attr('src').indexOf('yes') >= 0) {
++(totals[index]);
}
});
}
});
$('#total1').text(totals[0]);
$('#total2').text(totals[1]);
$('#total3').text(totals[2]);
}
注意onCheck()函数如何甚至不参数。那是因为更改了哪个复选框，或者是否已选中或取消选中复选框。
循环遍历每一行，如果选中其复选框，则循环显示每个图像框。
为了使上面的代码有效，您必须将类“checkRow”放在正确的<tr>元素上。 （你以前把它作为这些元素的“id”。）
我发现有几件事你的代码出错了。这里有几个：
.indexOf()的结果时使用>= 0，而不是> 0。imageBoxes[0]返回一个DOM元素，而不是jQuery对象。toString()，因为src属性是字符串。您也可以使用jQuery附加事件处理程序，而不是使用“onchange”属性，但我将其留在jsfiddle中。