嘗試制作一個html復選框，將一個數字添加到輸出字段

Question

我試圖創建一個表，當我選中一個框時，如果顯示的圖像是yes.jpg，則會在該列底部的輸出框中添加一個數字。 如果沒有，則不會添加任何數字。 一共有三列，每個復選框影響三個圖像，所以三個輸出框。 這是我的代碼。

    <html>
<head>
    <script>
     function onSelect(rowId)
     {
        var row = document.getElementById(rowId);
        var checkBox = row.getElementsByTagName("checkRow")[0];
        var outputRow = document.getElementById("outputRow");
        var totalRow1 = outputRow.getElementById("total1");
        var totalRow2 = outputRow.getElementById("total2");
        var totalRow3 = outputRow.getElementById("total3");
        //If box is checked, check images. If they are yes, edit boxes. 
        if (checkBox.checked)
            if (row.getElementById.("image1").src.indexOf(yes.png) > -1)
            {
                totalRow1.innerHTML = "dfd";
            }
        else {
            //checkBox = 
            }
        }
         /*function onCheck()
        {
            var total1 = document.getElementById("total1");
            window.alert("sometext");
            total1.innerHTML = "dfd";
        } */
    </script>
</head>

<body>
    <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" onclick="onCheck();">
                </form>     
            </td>
            <td>
                Item
            </td>
            <td id="image1">
                <img src="yes.png" alt="Needed">
            </td>
            <td id="image2">
                <img src="yes.png" alt="Needed">
            </td>
            <td id="image3">
                <img src="no.png" alt="Needed">
            </td>   
        </tr>



        <tr id="outputRow"> <!-- Table Bottom -->
            <td>
                <!--Empty-->
            </td>
            <td>
                Summation
            </td>
            <td id="total1">
                Area 1
            </td >
            <td id="total2">
                Area 2
            </td>
            <td id= "total3">
                Area 3
            </td>
        </tr>
    </table>
</body>

當前，我只是試圖在輸出框之一上編輯輸出文本（如我的onCheck()方法所示）。 但是，即使這樣似乎也不起作用。 我添加了一個警報，也不會發生。 我究竟做錯了什么？

Answer 1

有很多事情，你做錯了，

首先，您在單擊復選框時調用了onCheck()函數，但是沒有此類javascript函數。 您有onSelect(id)代替。

第二，你想.getElementById您TDs的那些ID，“圖像1”，所有都是TDS和不IMGS IDS

然后您正在為它們訪問.src ，因此無論如何都是錯誤的。

改進之處：

將輸入復選框更改為此：

  <input type="checkbox" name="Row1" value="Row1" onchange="onCheck(this);">

您正在做的是，您正在函數onCheck（this）中傳遞輸入的引用。

2 。 現在像這樣更改您的標記：

     <td>
            <form>
                <input type="checkbox" name="Row1" value="Row1"  onchange="onCheck(this);">
            </form>     
        </td>
        <td>
            Item
        </td>
        <td >
            <img  id="image1" src="yes.png" alt="Needed">
        </td>
        <td >
            <img id="image2" src="yes.png" alt="Needed">
        </td>
        <td >
            <img  id="image3" src="no.png" alt="Needed">
        </td>   
    </tr>

我要做的就是為正確的元素（即IMG）提供ID，而不是TD。

第三，使您的onCheck（）像這樣：

function onCheck(cb)
         {
            if(cb.checked===true)
            {
                if(document.getElementById('image1').src.toString().indexOf('yes')>0){
                    document.getElementById('total1').innerHTML='555';
                } 
                else
                {
                    document.getElementById('total1').innerHTML='No';
                }

                if(document.getElementById('image2').src.toString().indexOf('yes')>0){
                    document.getElementById('total2').innerHTML='555';
                } 
                else
                {
                    document.getElementById('total2').innerHTML='No';
                }

                if(document.getElementById('image3').src.toString().indexOf('yes')>0){
                    document.getElementById('total3').innerHTML='555';
                } 
                else
                {
                    document.getElementById('total3').innerHTML='No';
                }  
            }
        }

所以基本上onCheck與您的差不多。

現在，看這個工作的小提琴，我為您服務，它奏效了。 當然，我討厭您所做的一切。 所有這一切都可以以更簡單的方式完成。

另外，了解jQuery ，它使生活變得輕松。

嘗試制作一個html復選框，將一個數字添加到輸出字段

問題描述

1 個解決方案

解決方案1
0 2013-03-10 19:06:39

嘗試制作一個html復選框，將一個數字添加到輸出字段

問題描述

1 個解決方案

解決方案1 0 2013-03-10 19:06:39

解決方案1
0 2013-03-10 19:06:39