Home/ Questions/Q 4544310
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T15:39:13+00:00

I have some check box. I want that when I chek some check box

  • 0

I have some check box. I want that when I chek some check box total value will shown in a text box. now the problem is I have another text box. Someone enter a value in this text box.
after check the check box the total value will compare with that previously mentioned text box value. and if added checkbox value cross the limit of that mentioned value check box will not checked.
here is my code: 

//autoSumCheckboxes.js
function UpdateCost() {
  var sum = 0;
  var gn, elem;
  for (i=0; i<5; i++) {
    gn = 'budget'+i;
    elem = document.getElementById(gn);
    if (elem.checked == true) { sum += Number(elem.value); }
  }
  document.getElementById('totalcost').value = sum.toFixed(2);
} 


//checkbox.php
<head>
<script type="text/javascript" src="autoSumCheckboxes.js"></script>
</head>

<body>
<input name="approxbudget" id='approxbudget' type="text" class="ContactTextBox" value=""/>// put your budget
<input type="checkbox" id='budget0' value="9.99"  onclick="UpdateCost()">Game 1 ( 9.99)<br>
<input type="checkbox" id='budget1' value="19.99" onclick="UpdateCost()">Game 2 (19.99)<br>
<input type="checkbox" id='budget2' value="27.50" onclick="UpdateCost()">Game 3 (27.50)<br>
<input type="checkbox" id='budget3' value="45.65" onclick="UpdateCost()">Game 4 (45.65)<br>
<input type="checkbox" id='budget4' value="87.20" onclick="UpdateCost()">Game 5 (87.20)<br>
<input type="text" id="totalcost" value="">// total budget

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The best way would be not to do the whole calculation every time, but store the sum and only add to it when a checkbox is checked.

    <html>
<head>
<script>

var sum = 0;

function UpdateCost(clicked_element)
{
    clicked_element_value = Number(clicked_element.value);

    if(clicked_element.checked)
    {
        if(sum + clicked_element_value <= Number(document.getElementById('approxbudget').value))
        {
            sum += clicked_element_value;
            document.getElementById('totalcost').value = sum.toFixed(2);
        }
        else
        {
            clicked_element.checked = false;
        }
    }
    else
    {
        sum -= clicked_element_value;
        document.getElementById('totalcost').value = sum.toFixed(2);
    }
}

</script>
</head>
<body>
<input name="approxbudget" id='approxbudget' type="text" class="ContactTextBox" value=""/>// put your budget
<input type="checkbox" id='budget0' value="9.99"  onclick="UpdateCost(this)">Game 1 ( 9.99)<br>
<input type="checkbox" id='budget1' value="19.99" onclick="UpdateCost(this)">Game 2 (19.99)<br>
<input type="checkbox" id='budget2' value="27.50" onclick="UpdateCost(this)">Game 3 (27.50)<br>
<input type="checkbox" id='budget3' value="45.65" onclick="UpdateCost(this)">Game 4 (45.65)<br>
<input type="checkbox" id='budget4' value="87.20" onclick="UpdateCost(this)">Game 5 (87.20)<br>
<input type="text" id="totalcost" value="">// total budget
</body>
</html>
    • 0