Question

我正在尝试设计一个菜单。如果你选中一个方框，那么总和会加起来，如果你取消选中它，总和会减少。在取消选中框的同时减少总和时遇到麻烦，并且sum的值不会全局更改。请帮帮我。

<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>

Answer 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>

FIDDLE

Answer 2

尝试这样的事情：

var sum = 0;
function a(id, num) {
    if(id.checked == true){
        sum += num;
        id.onclick = function() { a(id, num)};
    }
    else {
        sum -= num;
        id.onclick = function() { a(id, num)};
    }
    document.getElementById("demo").innerHTML=sum;
}

小提琴：http://jsfiddle.net/95pvc/2/

Answer 3

您可以这样做：

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>

Answer 4

我自己的看法将涉及从HTML（不显眼的JavaScript）中删除事件处理以便将来更容易维护，使用data-*属性来包含价格并使用类名来标识相关成分，提供以下HTML：

<input class="ingredients" type="checkbox" name="Dal" data-price="10" id="dal" />Dal
<input class="ingredients" type="checkbox" name="Rice" data-price="20" id="rice" />Rice
 <h1> Total Price is : </h1>

<p id="demo">0</p>

这会导致以下JavaScript：

var ingredients = document.getElementsByClassName('ingredients');

function price() {
    var result = document.getElementById('demo'),
        curPrice = 0,
        ingredients = document.getElementsByClassName('ingredients');
    for (var i = 0, len = ingredients.length; i < len; i++) {
        if (ingredients[i].checked) {
            curPrice += parseFloat(ingredients[i].getAttribute('data-price'));
        }
    }
    result.firstChild.nodeValue = curPrice;
}

for (var i = 0, len = ingredients.length; i < len; i++) {
    ingredients[i].addEventListener('change', price);
}

JS Fiddle demo

为避免必须遍历相关的复选框，最好将input元素包装在form中，然后将事件处理绑定到该表单：

var ingredients = document.getElementsByClassName('ingredients');

function price() {
    var result = document.getElementById('demo'),
        curPrice = 0,
        ingredients = document.getElementsByClassName('ingredients');
    for (var i = 0, len = ingredients.length; i < len; i++) {
        if (ingredients[i].checked) {
            curPrice += parseFloat(ingredients[i].getAttribute('data-price'));
        }
    }
    result.firstChild.nodeValue = curPrice;
}

document.getElementById('formID').addEventListener('change', price);

JS Fiddle demo

参考文献：

取消选中复选框并修改sum的值

4 个答案: