取消選中複選框並修改總和值

我在設計一個菜單。如果你勾選了一個框，那麼總和會加起來，如果你取消勾選，總和就會減少。在取消選中框的同時，我在減少總數時遇到了麻煩，總和值也沒有全局更改。請幫助我。取消選中複選框並修改總和值

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

來源

2013-07-27 Akash Srivastava

嘗試是這樣的：

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-27 09:55:23

但如何知道該複選框是否被選中或取消選中 –

如果（的document.getElementById（id）的.checked ==真）{//做一些事情} –

更新小提琴：http://jsfiddle.net/95pvc/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

來源

2013-07-27 10:01:00 adeneo

你可以做這樣的事情：

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-27 10:01:11 Teemu

請告訴我爲什麼我的代碼中的總和未被全局修改 –

因爲'sum'作爲參數，這會影響全局'sum'。當你在'a'中操作'sum'時，它是一個局部變量，即一個'a'的參數，全局'sum'對'a'不可見。注意，你不需要傳遞全局的'sum'函數，因爲它是全局的，函數可以訪問它。雖然我的答案也許是讓代碼運行的最短途徑，但我建議你在生產代碼中使用adeneo或David的答案。 – Teemu

我自己取會涉及移除事件處理從HTML（不顯眼JavaScript），以便將來更輕鬆地進行維護，使用data-*屬性來包含價格並使用類名來標識相關成分， E以下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。

爲了避免通過相關的複選框來迭代，這可能是更好的包裹在一個form那些input元件，然後結合事件處理這種形式：

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。

參考文獻：

來源

2013-07-27 10:09:06

取消選中複選框並修改總和值

回答

相關問題