比较两个表单复选框是否选中答案

【问题标题】：compare two form's check box checked or not比较两个表单复选框是否选中
【发布时间】：2011-04-28 08:56:51
【问题描述】：

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

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

【问题讨论】：

我需要澄清什么还是我的新代码能满足这个问题？

标签： php javascript forms checkbox

【解决方案1】：

首先 - ID 必须是唯一的 - 您不能添加两个具有相同 ID 的元素。

将它们更改为name="budget[0]" 等等。与totalcost 相同 -> 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)"

【讨论】：

我希望当我选中一个表单的复选框时，另一个表单的复选框不会选中，并且复选框的值将被添加并显示在相应的文本框中。
@Moumita - 我不知道我是否理解你。如果复选框 nr 3 将在表格 1 中被选中，那么它应该在表格 2 中取消选中，并且在所有表格中 totalcost 应该是更新了吗？
没有。这两种形式完全不同，包含不同的价值，我有两种以上的形式。我希望没有人可以同时检查两种不同形式的复选框。当我选中一个表单的复选框时，复选框的值将被添加并显示在相应的文本框中。其他形式也会发生同样的事情。

【解决方案2】：

看看 JQuery 或 Prototype Javascript 库。它们是为做这些事情而设计的，应该很容易。

【讨论】：

【解决方案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>

【讨论】：

其添加复选框值。但我也需要当有人选中form1的某个复选框时，他/她不能选中form2的复选框。请帮助我。
@Moumita 我编辑了我的帖子，但我没有太多时间，所以它不是干净的代码，但我认为它现在几乎可以满足您的要求。