0

我正在编写代码，该代码根据何时根据该行中的图像是否为正确图像来检查复选框来更新总行。这是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：再次更新了小提琴。

4

1 回答 1

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

jsfiddle

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

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

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

于 2013-04-11T22:24:37.053 回答