Question

<script type="text/javascript">

 var total = 0;

    function test(item){
        if(item.checked){
           total+= parseInt(item.value);
        }else{
           total-= parseInt(item.value);
        }
        //alert(total);
        document.getElementById('Totalcost').innerHTML = total + " ";
        document.getElementById('Totalcost2').innerHTML = total + " ";
        document.getElementById('Totalcost3').innerHTML = total + " ";
    }


    </script>
    </head>
    <body>

   <input type="checkbox" name="channelcost" value="10" onClick="test(this,);"  />10<br />
<input type="checkbox" name="channelcost" value="20" onClick="test(this,);" />20 <br />
<input type="checkbox" name="channelcost" value="40" onClick="test(this,);" />40 <br />
<input type="checkbox" name="channelcost" value="60" onClick="test(this,);" />60 <br />

Total Amount : <span id="Totalcost"> </span><br />

<input type="checkbox" name="channelcost" value="10" onClick="test(this,);"  />10<br />
<input type="checkbox" name="channelcost" value="20" onClick="test(this,);" />20 <br />
<input type="checkbox" name="channelcost" value="40" onClick="test(this,);" />40 <br />
<input type="checkbox" name="channelcost" value="60" onClick="test(this,);" />60 <br />

    Total Amount : <span id="Totalcost2"> </span><br />

<input type="checkbox" name="channelcost" value="10" onClick="test(this,);"  />10<br />
<input type="checkbox" name="channelcost" value="20" onClick="test(this,);" />20 <br />
<input type="checkbox" name="channelcost" value="40" onClick="test(this,);" />40 <br />
<input type="checkbox" name="channelcost" value="60" onClick="test(this,);" />60 <br />

    Total Amount : <span id="Totalcost3"> </span><br />
    </html>

我的问题是如何设置它在同一页面上显示3个不同的总和而没有冲突，关于冲突我的意思是如果我在同一页面上设置3次id="Totalcost"它应该以不同方式显示它们但是它们显示同样，我试图设置3个不同的id的id = Totalcost，Totalcost2和Totalcost3，但它不起作用它会发生冲突。

Answer 1

如果我理解你，因为我不确定：

您不能将相同的ID归因于多个元素。

你必须做这样的事情：

function test(){
    var checklist = document.getElementById('modulo')
                            .getElementsByClassName('checklist');

    for (var i = 0 ; i < checklist.length ; i++) {

        var checkboxes = checklist[i].querySelectorAll('input[type=checkbox]'),
            sum = 0;

        for (var j = 0 ; j < checkboxes.length ; j++) {
            if (checkboxes[j].checked) {
                sum += Number(checkboxes[j].value)
            } 
        }

        checklist[i].getElementsByClassName('totalcost')[0].innerHTML = sum + " ";
    }
}

document.getElementById('modulo').addEventListener('change',test,false)

在BODY：

<form id="modulo">
    <div class="checklist">
        <input type="checkbox" name="channelcost" value="10" />10<br />
        <input type="checkbox" name="channelcost" value="20" />20 <br />
        <input type="checkbox" name="channelcost" value="40" />40 <br />
        <input type="checkbox" name="channelcost" value="60" />60 <br /><br />
        Total Amount : <span class="totalcost"> </span><br /><br />
    </div>
    <div class="checklist">
        <input type="checkbox" name="channelcost" value="10" />10<br />
        <input type="checkbox" name="channelcost" value="20" />20 <br />
        <input type="checkbox" name="channelcost" value="40" />40 <br />
        <input type="checkbox" name="channelcost" value="60" />60 <br /><br />
        Total Amount : <span class="totalcost"> </span>
    </div>
</form>

在同一页面上使用多个复选框值计算

1 个答案: