如何使用 javascript/jquery 检查特定的复选框？答案

【问题标题】：How to check specific checkboxes with javascript/jquery?如何使用 javascript/jquery 检查特定的复选框？
【发布时间】：2016-04-12 15:09:40
【问题描述】：

我有四个像这样在页面加载时开始的变量（注意：加起来是 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 个的值，因为默认情况下会检查它们。

无论如何，我确信为每个块设置一个代码块可能是一种低效的处理方式。任何人都对我可能压缩代码有任何指导，特别是仅在更改特定复选框时添加/减去值（因为简单地查看它们是否被选中会导致问题，因为默认情况下它们都被选中）

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

抱歉漫无边际，希望这对某人有意义。

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案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]);
}

【讨论】：

【解决方案2】：

您可以通过简单地循环所有复选框来更改任何具有.calc 类的复选框（这可以是任何东西 - 我只是在我的示例中使用了这个）并且将值存储在数据属性中或类似的东西，然后检查循环中的当前复选框是否已被选中，如果是，则将其添加到总数中。

在更改时，总数被重置并再次运行计算。

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

【讨论】：