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

【问题标题】：Unchecking a checkbox and modifying value of sum取消选中复选框并修改 sum 的值
【发布时间】：2013-07-27 18:15:48
【问题描述】：

我正在尝试设计一个菜单。如果您选中一个框，则总和会相加，如果您取消选中它，则总和会减少。我在取消选中该框的同时减少总和时遇到了麻烦，而且总和的值也没有全局更改。请帮帮我。

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

【问题讨论】：

标签： javascript checkbox

【解决方案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

【讨论】：

【解决方案2】：

你可以这样做：

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>

【讨论】：

因为您将sum 作为参数，所以这会影响全局sum。当你在a 中操作sum 时，它是一个局部变量，即a 的参数，而全局sum 对a 是不可见的。请注意，您根本不需要将全局 sum 传递给函数，因为它是全局的，函数无论如何都可以访问它。虽然我的回答可能是让您的代码正常工作的最短方法，但我建议您在生产代码中使用 adeneo 或 David 回答中的方法。

【解决方案3】：

试试这样的：

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/

【讨论】：

但是如何知道复选框是选中还是未选中
if(document.getElementById(id).checked == true){ //做点什么 }

【解决方案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.

参考资料：

【讨论】：