使用复选框根据图像更新总行

Question

我正在编写代码，该代码根据何时根据该行中的图像是否为正确图像来检查复选框来更新总行。 这是 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/ 编辑：有人指出我的身份证在重复。我在新的小提琴中解决了这个问题，但这并没有解决问题。 EDIT3：修复了更多问题，包括使用 td 元素作为其图像子元素。该链接现在指向更新的 Fiddle。 EDIT4：再次更新了小提琴。

Answer 1

如果我理解你想要什么，我认为你让这变得比它需要的更复杂。 （如果我错了，请纠正我。）我会让复选框的处理程序每​​次都重新计算总数。

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”。）

jsfiddle

我发现您的代码有几处错误。这里有一些：

1. “id”属性必须是唯一的。
2. 检查调用.indexOf()的结果时使用>= 0，而不是> 0。
3. imageBoxes[0] 返回一个 DOM 元素，而不是 jQuery 对象。
4. 不需要调用toString()，因为src 属性是一个字符串。

您也可以使用 jQuery 附加您的事件处理程序，而不是使用“onchange”属性，但我把它留在了 jsfiddle 中。