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个变量总是加起来

因此，例如，如果仍然选中所有三个复选框，则var a仍为60。如果取消选中复选框B并且仍然选中C / D，则var a变为80（原来60加20来自＆＃34;关闭＆＃34; var b）

我的想法是做这样的事......

$(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
    })
})

但后来我意识到，如果我每次更改任何一个EVER框，那么我会不必要地从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类的任何复选框来实现这一点（这可以是任何东西 - 我只是将它用于我的例子）并且存储了一个值数据属性或类似的东西，然后检查循环中的当前复选框是否已被检查，如果是，则将其添加到总金额。

在更改时，总计会重置，计算会再次运行。

这是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);
});

和一个有效的代码：

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

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

2 个答案: