0

メニューを考えてみます。チェックボックスをオンにすると合計が加算され、チェックを外すと合計が減額されます。ボックスのチェックを外しながら合計を減らすのに問題があり、合計の値もグローバルに変更されません。私を助けてください。

<head>
    <script>
        var sum=0;
        function a(sum,num) {
            sum=sum+num;
            document.getElementById("demo").innerHTML=sum;
        }
    </script>
</head>
<body>
    <input type="checkbox" name="Dal" id="dal" onclick=a(sum,10)>Dal<br>
    <input type="checkbox" name="Rice"  id="rice" onclick=a(sum,20)>Rice<br>
    <h1> Total Price is : </h1>
    <p id="demo"> 0 </p>
</body>
4

4 に答える 4

1

マークアップを変更し、値とクラスを追加し、インライン JS を削除します

<input type="checkbox" name="Dal" id="dal" value="10" class="myClass">Dal
<input type="checkbox" name="Rice" id="rice" value="20" class="myClass">Rice

<h1> Total Price is : </h1><p id="demo">0</p>

それからする

<script type="text/javascript">
    var inputs = document.getElementsByClassName('myClass'),
        total  = document.getElementById('demo');

    for (var i=0; i < inputs.length; i++) {
        inputs[i].onchange = function() {
            var add = this.value * (this.checked ? 1 : -1);
            total.innerHTML = parseFloat(total.innerHTML) + add
        }
    }
</script>

フィドル

于 2013-07-27T10:01:00.627 に答える
0

次のようなことができます。

function a (elem, num) {
    var k = (elem.checked) ? 1 : -1;
    sum = sum + k * num;
    document.getElementById("demo").innerHTML = sum;
}

そしてHTMLで：

<input type="checkbox" name="Dal" id="dal" onclick="a(this, 10);">Dal<br>
<input type="checkbox" name="Rice"  id="rice" onclick="a(this, 20);">Rice<br>
于 2013-07-27T10:01:11.443 に答える