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

尝试这样的事情：

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/

于 2013-07-27T09:55:23.633 回答
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 回答
0

我自己的做法将涉及从 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 小提琴演示。

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

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 小提琴演示。

参考：

于 2013-07-27T10:09:06.237 回答