Value of Sum not changed after unchecked Checkbox Button Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Value of Sum not changed after unchecked Checkbox Button without wasting too much if your time.

The question is published on by Tutorial Guruji team.

Im looking solution for this problem. I have 3 input number that will sum all of that and display it to input4.

All my code is working fine but only when I unchecked the checkbox, the value of sum didn’t update.

Scenario example:

  1. Checked on first checkbox and enter value of 1

  2. Checked on second checkbox and enter value of 1. This will trigger the display value and will show result=2

  3. Unchecked the first checkbox will clear the first input value, but the result display not update(still result=2.. Should be 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';
  }
}

This is the demo:

Demo Here

Thank You in Advance

Answer

Working Demo – 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
}
We are here to answer your question about Value of Sum not changed after unchecked Checkbox Button - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji