未选中复选框按钮后总和的值未更改答案

【问题标题】：Value of Sum not changed after unchecked Checkbox Button未选中复选框按钮后总和的值未更改
【发布时间】：2021-05-29 09:05:48
【问题描述】：

我正在寻找这个问题的解决方案。我有 3 个输入数字，它们会将所有数字相加并将其显示到 input4。

我的所有代码都可以正常工作，但只有当我取消选中该复选框时，sum 的值才不会更新。

场景示例：

选中第一个复选框并输入值 1
选中第二个复选框并输入值 1。这将触发显示值并显示 result=2
不勾选第一个复选框会清除第一个输入值，但结果显示不更新（还是result=2..应该是result=1）

HTML：

<input type="checkbox" id="chkbxcasting" />
<input type="number" id="casting1" name="casting1" value="0" disabled onchange="valChange(this);" onkeyup="sum1();" /><br>

<input type="checkbox" id="chkbxdeburring" />
<input type="number" id="deburring1" name="deburring1" value="0" disabled onchange="valChange(this);" onkeyup="sum1();" /><br>

<input type="checkbox" id="chkbxecoat" />
<input type="number" id="ecoat1" name="ecoat1" value="0" disabled onchange="valChange(this);" onkeyup="sum1();" /><br><br>

<input class="invisibleinput" type="number" id="totalaffectqty" name="totalaffectqty" readonly />

CSS

input[value="0"] { color: #fff; }

Javascript + JQuery

function valChange(obj){
  if(obj.value=="0"){
    obj.style.color="#fff"
  } else{
    obj.style.color="#000"
  }
}

$(document).ready(function() {
  $('#chkbxcasting').on('change', function() {
    $("#casting1").prop("disabled", !$(this).is(':checked'));
    $("#casting1").val('');
  });

  $('#chkbxdeburring').on('change', function() {
    $("#deburring1").prop("disabled", !$(this).is(':checked'));
    $("#deburring1").val('');
  });

  $('#chkbxecoat').on('change', function() {
    $("#ecoat1").prop("disabled", !$(this).is(':checked'));
    $("#ecoat1").val('');
  });
});

function sum1() {
  let casting1 = +(document.getElementById('casting1').value);
  let deburring1 = +(document.getElementById('deburring1').value);
  let ecoat1 = +(document.getElementById('ecoat1').value);

  let result1 = casting1 + deburring1 + ecoat1;
  if (!isNaN(result1)) {
    document.getElementById('totalaffectqty').value = result1;
  }
  else {
    document.getElementById('totalaffectqty').value = '0';
  }
}

这是演示：

Demo Here

提前致谢

【问题讨论】：

您的函数 sum1() 没有被调用。您应该在所有更改函数中调用 sum1()
如果所有的值都是 0 那么 sum 会如何变化？
你所说的 cal sum1() inside all on change 是什么意思？如果全为 0 则不会有任何变化
你有几个 on('change', finction() {，我说过你必须在这些函数中调用 sum1() 就像在 $("casting").val(); 之后我的第二条评论，我误解了。

标签： javascript html jquery laravel

【解决方案1】：

工作演示 - https://jsfiddle.net/disingh123/szmt8rv2/3/

    <input type="checkbox" id="chkbxcasting" />
    <input type="number" id="casting1" name="casting1" value="0" disabled /><br>

    <input type="checkbox" id="chkbxdeburring" />
    <input type="number" id="deburring1" name="deburring1" value="0" disabled /><br>

    <input type="checkbox" id="chkbxecoat" />
    <input type="number" id="ecoat1" name="ecoat1" value="0" disabled /><br><br>

    <input class="invisibleinput" type="number" id="totalaffectqty" name="totalaffectqty" readonly />

$(document).ready(function () {
    $('body').on('change', function (event) {
        const { target: { type } } = event
        if (type === 'checkbox') {
            const jQueryFiedTarget = $(event.target)
            const isChecked = jQueryFiedTarget.is(':checked')
            const associatedTextField = jQueryFiedTarget.next()
            associatedTextField.prop("disabled", !isChecked);
            associatedTextField.val(isChecked ? '' : '0')
            if (!isChecked) {
                sum1()
            }
        }
    })

    $('body').on('keyup', function (event) {
        const { target: { type } } = event
        if (type === 'number') {
            sum1()
        }
    })
});

function sum1() {
    const casting1 = +(document.getElementById('casting1').value);
    const deburring1 = +(document.getElementById('deburring1').value);
    const ecoat1 = +(document.getElementById('ecoat1').value);
    const result1 = casting1 + deburring1 + ecoat1;
    document.getElementById('totalaffectqty').value = isNaN(result1) ? '0' : result1
}

【讨论】：