いくつかのチェックボックスがチェックされているときに値を増やしたい

Question

1つまたは複数のチェックボックスをオンにした場合、価格を引き上げたいとします。ここで私が持っているコードですが、それは動作しません

HTML

<input type="checkbox" value="15" />Checkbox 
<br/> 
<br/> 
<span id="result"></span> 

JAVASCRIPT

var a=0; 
window.onload = function() { 
var input = document.querySelector('input[type=checkbox]'); 

function check() { 
    var a = a+value; 
    document.getElementById('result').innerHTML = 'result ' + a; 
    } 

input.onchange = check; 
check(); 
    } 

Answer 1

あなたは、トップのvar Aでそれを初期化した際に「」グローバルスコープであるあなたの変数= 0;それを使用したい場合は、a = a + 1を直接実行することができます。

これをvar inside check関数として再度宣言すると、これはcheck関数スコープにバインドされた新しい変数 "a"になります新しい変数とそれが上に宣言された変数を参照していない。

したがって、解決策は宣言varを削除し、それをa = a + 1の内部チェック関数として直接使用します。

また、あなたは、チェックボックスがチェックされているかどうかを確認する必要があります。ここに

は作業fiddle次のとおりです。https://jsfiddle.net/1m09z0cg/

Answer 2

あなたがチェック機能で変数離れてあなたのスコープました、そしてあなたが呼んでいます機能チェック適切な "this"なし。

これは間違ったことがいくつかあります

var a = 0; 
window.onload = function() { 
    var input = document.querySelector('input[type=checkbox]'); 

    function check() { 
    a = a + parseInt(this.value, 10); 
    document.getElementById('result').innerHTML = 'result ' + a; 
    } 

    input.onchange = check; 
    input.onchange(); 
} 

Answer 3

動作するはずです。

最初にquerySelectorは、セレクタに一致する最初の要素のみを返します。すべてのチェックボックスを使用する場合は、querySelectorAllを使用する必要があります。あなたはあなたが現在のコンテキストに新しい変数aを宣言しているvar a = ...を使用することにより、a = a+value;を使用する必要がありますaグローバル変数の前の値にvalueを追加したい場合は

第二に、あなたはvar a = a+value;を使用しています。

第3に、変数valueがありません。クリックした要素の値を取得しようとすると、event.currentTarget.valueが使用されます。

var checkboxes = Array.from(document.querySelectorAll("input[type='checkbox']")); 
 
var result = document.querySelector("#result"); 
 
checkboxes.forEach(function(checkbox){ 
 
    checkbox.onchange = function(){ 
 
     var total = checkboxes.reduce(function(a, c){ 
 
      return a + (c.checked ? parseInt(c.value):0); 
 
     }, 0); 
 
     result.textContent = "Result " + total; 
 
    } 
 
});

<input type="checkbox" value="15" />Checkbox 
 
<br/> 
 
<input type="checkbox" value="15" />Checkbox 2 
 
<br/> 
 
<input type="checkbox" value="15" />Checkbox 3 
 
<br/> 
 
<br/> 
 
<span id="result">Result 0</span>