javascript - 如何使用 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
    })
})

但后来我意识到，如果我每次更改其中任何一个框时都查看每个框，那么我将不必要地从 var a 中减去其中 2 个框的值，因为默认情况下会检查它们。

不管怎样，我确信每个 block 都有一个代码块可能是处理这个问题的低效方法。任何人都可以为我提供有关可能压缩代码的任何指示，特别是仅在更改特定复选框时添加/减去值(因为仅查看它们是否被选中会导致问题，因为默认情况下它们都是选中的)

例如在上面的代码中，如果复选框 D 未被选中并触发了该函数，它会查看复选框 B 并看到它被选中并从 a 中减去 20，但它不应该，因为 B 根本没有改变还没有。

很抱歉胡言乱语，希望这对某人有意义。

Answer 1

首先，让我们通过将整个 band 封装到一个对象中来简化事情，如下所示:

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

很明显您希望将总和保留为 100，但不清楚您希望如何保留该总和。哪个变量将获得该值以及如何获得该值。现在，我假设 a 将保存所有盈余。无论如何，当用户(那个小 SCSS )重新选中其中一个复选框时，您需要拥有原始值，所以，让我们克隆它并存储克隆:

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

然后有一个检查和取消检查功能，如下所示:

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

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