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

after check some check box value will show in a text box and compare with other text box value

本文关键字：文本 比较 其他 显示 复选框      更新时间：2023-09-26

我有一些复选框。我希望，当我选中一些复选框总价值将显示在一个文本框。现在的问题是我有另一个文本框。有人在此文本框中输入值。选中复选框后，总价值将与前面提到的文本框值进行比较。并且如果添加的复选框值超过了该值的限制，则复选框将不会被选中。下面是我的代码:

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

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

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

你的问题陈述不是很清楚，但根据我的理解，这里是一个粗略的修改。如果总金额超过大致预算，您似乎想要"取消选中"某个复选框，并且不更新总成本。

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

<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>
相关文章：