after check some check box value will show in a text box and compare with other text box value_问答_开发者

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>

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>

Your question statement is not exactly clear but here's a crude modification based on my understanding. It seems you want to 'uncheck' a checkbox and not update the total cost if the total sum exceeds approximate budget.

Check a crude variation of the code below and see if it helps:

<body>

<head>
<script>
//autoSumCheckboxes.js
function UpdateCost() {
  var sum = 0;
  var gn, elem, approxBudget;
  var approxBudget = document.getElementById('approxbudget').value * 1;
  var isCostUpdated = true;
  for (i=0; i<5; i++) {
    gn = 'budget'+i;
    elem = document.getElementById(gn);
    if (elem.checked == true) { sum += Number(elem.value); }

    if (sum > approxBudget)  {
        elem.checked = false;
        isCostUpdated = false;
    }
  }
  sum = 1 * sum.toFixed(2);

    if (isCostUpdated)
        document.getElementById('totalcost').value = sum;
}

</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>