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

发布于 2024-11-04 07:01:19 字数 1797 浏览 1 评论 0原文

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

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

原文

I have two or more form. and each form contain some check box and the check value shown in a text box. I want that when I chek some check box total value will shown in a text box in that form. I want that when I check some check box of one form other form's check box will not checked and return a alert.
here is my code:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟雨扶苏 2024-11-11 07:01:19

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

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

Fistr of all - ID has to be unique - you cannot add two elements with the same id.

Change them to name="budget[0]" and so on. The same thing with totalcost -> name="totalcost".

Then modify your function to:

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

And now change onclick events to onclick="UpdateCost(this)"

回复收藏 0 原文

七分※倦醒 2024-11-11 07:01:19

查看 JQuery 或 Prototype Javascript 库。它们是为执行此类操作而构建的，并且应该使其变得简单。

回复收藏 0 原文

对岸观火 2024-11-11 07:01:19

首先，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>

First of all id's need to be unique so for example add the form to the id.

Moreover tell the UpdateCost function what form you are working on, by adding a parameter

Than you will already modify the correct total field, and the total will be calculated for each form you have.

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

回复收藏 0 原文

~没有更多了~