javascript 使用输入类型复选框进行加减

Question

我有可用的代码，但想知道是否有办法用 JS 循环压缩它？我试过了，但我遇到了麻烦。我正在尝试为我计划玩的游戏构建一个计算器网页。 "hide" 是游戏中 activity 皮肤的 material 物品。我预计会有几个 material 项目。谢谢！

total = 0;
hide1 = 1;
hide2 = 1;
hide3 = 1;

function addUp(num, x) {
  if (x == "hide1" && hide1 == 1) {
    temp = document.theForm.ttl.value;
    tempo = parseInt(temp);
    numo = parseInt(num);
    nwTemp = tempo + numo;
    document.theForm.ttl.value = nwTemp;
    hide1 = 0;
    return hide1;
  }
  if (x == "hide1" && hide1 == 0) {
    temp = document.theForm.ttl.value;
    tempo = parseInt(temp);
    numo = parseInt(num);
    nwTemp = tempo - numo;
    document.theForm.ttl.value = nwTemp;
    hide1 = 1;
  }
  if (x == "hide2" && hide2 == 1) {
    temp = document.theForm.ttl.value;
    tempo = parseInt(temp);
    numo = parseInt(num);
    nwTemp = tempo + numo;
    document.theForm.ttl.value = nwTemp;
    hide2 = 0;
    return hide2;
  }
  if (x == "hide2" && hide2 == 0) {
    temp = document.theForm.ttl.value;
    tempo = parseInt(temp);
    numo = parseInt(num);
    nwTemp = tempo - numo;
    document.theForm.ttl.value = nwTemp;
    hide2 = 1;
  }
  if (x == "hide3" && hide3 == 1) {
    temp = document.theForm.ttl.value;
    tempo = parseInt(temp);
    numo = parseInt(num);
    nwTemp = tempo + numo;
    document.theForm.ttl.value = nwTemp;
    hide3 = 0;
    return hide3;
  }
  if (x == "hide3" && hide3 == 0) {
    temp = document.theForm.ttl.value;
    tempo = parseInt(temp);
    numo = parseInt(num);
    nwTemp = tempo - numo;
    document.theForm.ttl.value = nwTemp;
    hide3 = 1;
  }
}

<form name="theForm" style="display:block;border:1px">
  <div id="t1" style="display:none;">
    <input type="checkbox" onclick="addUp(4, 'hide1')">
Beginner's Leather Hood
    <br/>
    <input type="checkbox" onClick="addUp(8, 'hide2')">
Beginner's Leather Armor
    <br/>
    <input type="checkbox" onClick="addUp(4, 'hide3')">
Beginner's Leather Shoes
    <br/>
  </div>
  <div id="t2" style="display:none;">
    <input type="checkbox" onclick="addUp(8, 'hide4')">
Novice's Leather Hood
    <br/>
    <input type="checkbox" onClick="addUp(16, 'hide5')">
Novice's Leather Armor
    <br/>
    <input type="checkbox" onClick="addUp(8, 'hide6')">
Novice's Leather Shoes
    <br/>
  </div>
  Total Number:
  <input type="text" name="ttl" value=0>
</form>

Answer 1

这适合你吗？

total = 0;
var hide = [];
hide[1] = 1;
hide[2] = 1;
hide[3] = 1;

function addUp(num, x) {
    var index = parseInt(x.replace("hide",""));
    if(hide[index] == 1)
    {
        temp = document.theForm.ttl.value;
        tempo = parseInt(temp);
        numo = parseInt(num);
        nwTemp = tempo + numo;
        document.theForm.ttl.value = nwTemp;
        hide[index] = 0;
        return hide[index];
    }
    else if(hide[index] == 0)
    {
        temp = document.theForm.ttl.value;
        tempo = parseInt(temp);
        numo = parseInt(num);
        nwTemp = tempo - numo;
        document.theForm.ttl.value = nwTemp;
        hide[index] = 1;
    }

}

Answer 2

我会考虑看看 data-* attributes and event listeners。您可以为每个复选框的值设置一个数据属性，然后为复选框的更改事件设置一个事件侦听器。

javascript 使用输入类型复选框进行加减

javascript adding and subtracting using input type checkbox

javascript

checkbox

calculator