Question

我有一些复选框。我希望当我查询一些复选框时，总值将显示在文本框中。现在的问题是我有另一个文本框。有人在此文本框中输入值。选中后，复选框的总值将与之前提到的文本框值进行比较。如果添加了复选框值，则不会检查所提到的值的限制复选框。这是我的代码：

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

Answer 1

最好的方法是不要每次都进行整个计算，而是存储总和，只有在选中复选框时才添加它。

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

Answer 2

您的问题陈述并不完全清楚，但根据我的理解，这是一个粗略的修改。您似乎要“取消选中”一个复选框，如果总金额超过预算，则不会更新总费用。

检查以下代码的粗略变体，看看是否有帮助：

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

检查后，一些复选框值将显示在文本框中，并与其他文本框值进行比较

2 个答案: