如何使用javascript / jquery檢查特定的復選框？

Question

我有四個這樣的變量從頁面加載開始（注意：全部加起來等於100）...

a=60;
b=20;
c=10;
d=10;

我有三個這樣的復選框。

  <label for="b">B</label>
  <input type="checkbox" id="b"  name="b" value="" checked="checked" >
  <label for="c">C</label>
  <input type="checkbox" id="c"  name="c" value="" checked="checked" >
  <label for="d">D</label>
  <input type="checkbox" id="d"  name="d" value="" checked="checked" >

如您所見，默認情況下，所有三個復選框均處於選中狀態。 我要基於選中/取消選中這三個框中的任何一個，從上面更改變量。 本質上，取消選中復選框將關閉該變量並將其值設為0。換句話說：

var b將為20（選中復選框時）或0（如果未選中）

var c將為10（選中復選框時）或0（如果未選中）

var d將為10（選中此復選框時）或0（如果未選中）

當未選中其中任何一個時，我想將它們的值添加到var a中，因為我希望所有4個變量始終加起來為100

因此，例如，如果所有三個復選框均保持選中狀態，則var a保持60。如果未選中復選框B，並且C / D保持選中狀態，則var a變為80（原始60加上“關閉” var b的20）。

我的想法是要做這樣的事情...

$(function() {
    $("input[type='checkbox']").change(function() {
        if(document.getElementById('b').checked) {
            var a = a-20; 
            var b = 20;
        } else {
            var a = a+20;
            var b = 0;
        }
       //and do this for all three checkboxes
    })
})

但是后來我意識到，如果每次更改每個框時都查看EACH框，那么我會不必要地從var a中減去其中的2個值，因為默認情況下會對其進行檢查。

無論如何，我確定每個代碼塊都有一個代碼塊可能是一種效率低下的方式。 任何人都可以指導我壓縮代碼，特別是僅當更改特定復選框時才增加/減少值（因為僅查看它們是否被選中會導致問題，因為默認情況下它們都已選中）

例如，在上面的代碼中，如果未選中復選框D並觸發了該函數，它將查看復選框B並選中它，並從a中減去20，但這不應該，因為B尚未完全更改。

很抱歉漫步，希望這對某些人有意義。

Answer 1

首先，通過將整個頻段封裝到一個對象中來簡化事情，如下所示：

var composite: {
    a: 60,
    b: 20,
    c: 10,
    d: 10
};

很明顯，您希望將總數保持為100，但不清楚如何保持該總數。 哪些變量將獲取值以及如何獲取。 現在，我將假定a將保留所有盈余​​。 無論如何，當用戶（那個小混蛋）重新選中其中一個復選框時，您需要具有該案例的原始值，因此，讓我們對其進行克隆並存儲克隆：

var oldComposite = JSON.parse(JSON.stringify(composite));

然后具有檢查和取消檢查功能，如下所示：

function check(code) {
    composite.a += combosite[code];
}

function uncheck(code) {
    composite.a -= (composite[code] = oldComposite[code]);
}

Answer 2

您可以通過簡單地循環遍歷所有具有.calc類（可以是任何東西，我只是在示例中使用此值）並且具有存儲在data屬性或類似內容中的值的所有復選框來做到這一點，然后檢查是否已選中循環中的當前復選框，如果已選中，則將其添加到總計中。

更改時，總計將重置，並再次運行計算。

這是HTML：

<input type="checkbox" data-val="20" class="calc" />
<input type="checkbox" data-val="10" class="calc" />
<input type="checkbox" data-val="40" class="calc" />
<input type="checkbox" data-val="30" class="calc" />

JS：

$('.calc').on('change', function() {
  var total = 0;
  $('.calc').each(function() {
    if ($(this).is(':checked')) {
      total = (total + parseInt($(this).attr('data-val')));
    }
  });
  console.log(total);
});

和一個有效的codepen：

http://codepen.io/sonnyprince/pen/aNqxdz