Question

我有两个或更多表格。每个表单都包含一些复选框和文本框中显示的检查值。我希望当我查询一些复选框时，总价值将显示在该表单的文本框中。 我希望当我查看某个表单的某个复选框时，其他表单的复选框将不会被选中并返回警报。这是我的代码：

<head>
<script>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);
} 
</script>
</head>

<body>
// 1st form
<form name= "form1">
<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
</form>
// 2nd form
<form name= "form2">
<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
</form>

</body>

Answer 1

所有的Fistr - ID必须是唯一的 - 你不能添加两个具有相同id的元素。

将它们更改为name="budget[0]"，依此类推。与totalcost相同的事情 - ＆gt; name="totalcost"。

然后将您的功能修改为：

function UpdateCost(input) {
    var elements = input.form.elements;
    var sum = 0;
    var resultElement;

    for ( var i = 0; i < elements.length; i++ ) {
        var element = elements[i];
        if ( element.type == 'checkbox' && element.checked ) {
            sum += parseFloat( element.value );
        } else if ( element.type == 'text' ) {
            resultElement = element;
        }
    }

    element.value = sum;
}

现在将onclick个事件更改为onclick="UpdateCost(this)"

Answer 2

看看JQuery或Prototype Javascript库。它们是为做这些事而建的，应该让它变得简单。

Answer 3

首先，id需要唯一，例如将表单添加到id。

此外，通过添加参数

告诉UpdateCost函数您正在处理的是什么形式

您已经修改了正确的总字段数，并且将为您拥有的每个表单计算总数。

<head>
<script>

    var only_allowed_for = '';

    function UpdateCost(form) {
        if (only_allowed_for == '') {

            only_allowed_for = form;

        }

        var sum = 0;
        var gn, elem;
        for (i=0; i<5; i++) {

            gn = form + '_budget'+ i;
            elem = document.getElementById(gn);

            if (elem.checked == true)
                if (only_allowed_for == form) {
                    sum += Number(elem.value);
                } else {

                    elem.checked = false;

                }

          }
          document.getElementById(form + '_totalcost').value = sum.toFixed(2);
    } 
</script>
</head>

<body>
// 1st form
<form name= "form1">
<input type="checkbox" id='form1_budget0' value="9.99"  onclick="UpdateCost('form1')">Game 1 ( 9.99)<br>
<input type="checkbox" id='form1_budget1' value="19.99" onclick="UpdateCost('form1')">Game 2 (19.99)<br>
<input type="checkbox" id='form1_budget2' value="27.50" onclick="UpdateCost('form1')">Game 3 (27.50)<br>
<input type="checkbox" id='form1_budget3' value="45.65" onclick="UpdateCost('form1')">Game 4 (45.65)<br>
<input type="checkbox" id='form1_budget4' value="87.20" onclick="UpdateCost('form1')">Game 5 (87.20)<br>
<input type="text" id="form1_totalcost" value="0.00">// total budget
</form>
// 2nd form
<form name= "form2">
<input type="checkbox" id='form2_budget0' value="9.99"  onclick="UpdateCost('form2')">Game 1 ( 9.99)<br>
<input type="checkbox" id='form2_budget1' value="19.99" onclick="UpdateCost('form2')">Game 2 (19.99)<br>
<input type="checkbox" id='form2_budget2' value="27.50" onclick="UpdateCost('form2')">Game 3 (27.50)<br>
<input type="checkbox" id='form2_budget3' value="45.65" onclick="UpdateCost('form2')">Game 4 (45.65)<br>
<input type="checkbox" id='form2_budget4' value="87.20" onclick="UpdateCost('form2')">Game 5 (87.20)<br>
<input type="text" id="form2_totalcost" value="0.00">// total budget
</form>

</body>

比较两个表格复选框是否选中

3 个答案: