在表单中添加值

Question

我制作了一个包含一些项目的表格。每个项目都有一个值。

现在我的问题是，如何将这些项目的值（当您检查它们时）添加到总值中？

  <form id="AddValuesForm" action="">  

    <fieldset id="AddValuesFormPart1">

      <legend>Add Values</legend>      

      <ul>

        <li>
          <ul id="AddValueList">
            <li id="AddValueItem1">
            <input id="value1" type="checkbox" name="value1" value="" tabindex="10"/> <label for="value1">Cheesecake</label>
            <input class="v1" id="value1" type="text" name="value1" value="1.25" disabled="disabled" maxlength="10"/>
            </li>
            <li id="AddValueItem2">
            <input id="value2" type="checkbox" name="value2" value="" tabindex="20"/> <label for="value2">Banana Pie</label>
            <input class="v2" id="value2" type="text" name="value2" value="1.50" disabled="disabled" maxlength="10"/>
            </li>
            <li id="AddValueItem3">
            <input id="value3" type="checkbox" name="value3" value="" tabindex="30"/> <label for="value3">Chocolate Muffin</label>
            <input class="v3" id="value3" type="text" name="value3" value="1.00" disabled="disabled" maxlength="10"/>
            </li>
          </ul>
        </li>

        <li>
          <ul id="AddValueTotalList">
            <li id="AddValueTotal">
            <label for="total">Total:</label><input class="t" id="total" type="text" name="total" value="0.00" disabled="disabled" maxlength="10"/>
            </li>
          </ul>
        </li>


        <li id="ValueSubmit"><input id="AddValuesItem10" type="submit" name="submit" value="Submit Add Values Form" tabindex="100"/></li> 

      </ul>

    </fieldset>
  </form>

注：未使用jQuery。

Answer 1

var t=0;
for (i=1; i<=3; i++) {
t = t + document.getElementById('value' + i).value;
}

document.getElementById('total').value = t;

Answer 2

应该这样做：

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">

<style type="text/css">

ul{list-style-type:none;}

ul#AddValueList{float:left;}

.v1, .v2, .v3
{
width:35px;
text-align:right;
color:#000;
}

.v1{margin:0px 0px 0px 50px;}

.v2{margin:0px 0px 0px 56px;}

.v3{margin:0px 0px 0px 19px;}

.t
{
width:35px;
text-align:right;
color:#000;
margin:20px 0px 0px 118px;
}

#ValueSubmit, 
#AddValueTotalList
{
clear:left;
}

#ValueSubmit input{margin:20px 0px 0px 0px;}

</style>

<script type="text/javascript">

var totalcounter = 0;

totaltracker = function (event) {
    var targetelement = (typeof event.target != "undefined") ? event.target : event.srcElement;
    var multipler = 0;
    if (targetelement.checked) {
        multipler++;
    } else {
        multipler--;
    }
    var targetvalue = document.getElementById(targetelement.id + 'a');
    var idtotal = document.getElementById("total");
    if (idtotal) idtotal.value = parseFloat(idtotal.value) + (multipler * parseFloat(targetvalue.value));



};

function totalloader () {
    var elements = document.getElementsByTagName('INPUT');
    for (var i=0; i<elements.length; i++) {
        var thisElement = elements[i];
        if (thisElement.getAttribute("type") == "checkbox") {
            if (typeof thisElement.addEventListener != "undefined") {
                thisElement.addEventListener("click", totaltracker, true);
            } else if (typeof thisElement.attachEvent != "undefined") {
                thisElement.attachEvent("onclick", totaltracker);
            }
        }
    }
}

</script>

<title>Add Values in Form</title>
</head>

<body onLoad="totalloader();">

  <form id="AddValuesForm" action="">

    <fieldset id="AddValuesFormPart1">

      <legend>Add Values</legend>

      <ul>

        <li>
          <ul id="AddValueList">
            <li id="AddValueItem1">
            <input id="value1" type="checkbox" name="value1" value="" tabindex="10"/>
            <label for="value1">Cheesecake</label>
            <input class="v1" id="value1a" type="text" name="value1" value="1.25" disabled="disabled" maxlength="10"/>
            </li>
            <li id="AddValueItem2">
            <input id="value2" type="checkbox" name="value2" value="" tabindex="20"/> <label for="value2">Banana Pie</label>
            <input class="v2" id="value2a" type="text" name="value2" value="1.50" disabled="disabled" maxlength="10"/>
            </li>
            <li id="AddValueItem3">
            <input id="value3" type="checkbox" name="value3" value="" tabindex="30"/> <label for="value3">Chocolate Muffin</label>
            <input class="v3" id="value3a" type="text" name="value3" value="1.00" disabled="disabled" maxlength="10"/>
            </li>
          </ul>
        </li>

        <li>
          <ul id="AddValueTotalList">
            <li id="AddValueTotal">
            <label for="total">Total:</label><input class="t" id="total" type="text" name="total" value="0.00" disabled="disabled" maxlength="10"/>
            </li>
          </ul>
        </li>


        <li id="ValueSubmit"><input id="AddValuesItem10" type="submit" name="submit" value="Submit Add Values Form" tabindex="100"/></li>

      </ul>

    </fieldset>
  </form>

</body>
</html>

我已将禁用值字段的 ID 更改为更容易将复选框等同于要合计的值。
我在 body 标签中添加了一个 onload。
我添加了一个脚本部分来完成这项工作。

Answer 3

Please use the code Below

        function recalculate(obj, id) {
            var total = parseFloat(document.getElementById('total').value);
            var amount = parseFloat(document.getElementById(id).value);
            if (obj.checked) {
                total += amount;
            } else {
                if (total >= 0) {
                    total -= amount;
                }
            }
            document.getElementById('total').value = total;
        }
    </script>


   <form id="AddValuesForm" action="">  

        <fieldset id="AddValuesFormPart1">

            <legend>Add Values</legend>      

            <ul>

                <li>
                    <ul id="AddValueList">
                        <li id="AddValueItem1">
                            <input id="value1" type="checkbox" name="value1" value="" tabindex="10" onchange="recalculate(this, 'txtValue1');"/> <label for="value1">Cheesecake</label>
                            <input class="v1" id="txtValue1" type="text" name="value1" value="1.25" disabled="disabled" maxlength="10"/>
                        </li>
                        <li id="AddValueItem2">
                            <input id="value2" type="checkbox" name="value2" value="" tabindex="20" onchange="recalculate(this, 'txtValue2');"/> <label for="value2">Banana Pie</label>
                            <input class="v2" id="txtValue2" type="text" name="value2" value="1.50" disabled="disabled" maxlength="10"/>
                        </li>
                        <li id="AddValueItem3">
                            <input id="value3" type="checkbox" name="value3" value="" tabindex="30" onchange="recalculate(this, 'txtValue3');"/> <label for="value3">Chocolate Muffin</label>
                            <input class="v3" id="txtValue3" type="text" name="value3" value="1.00" disabled="disabled" maxlength="10"/>
                        </li>
                    </ul>
                </li>

                <li>
                    <ul id="AddValueTotalList">
                        <li id="AddValueTotal">
                            <label for="total">Total:</label><input class="t" id="total" type="text" name="total" value="0.00" disabled="disabled" maxlength="10"/>
                        </li>
                    </ul>
                </li>


                <li id="ValueSubmit"><input id="AddValuesItem10" type="submit" name="submit" value="Submit Add Values Form" tabindex="100"/></li> 

            </ul>

        </fieldset>
    </form>

Answer 4

使用 JQuery JSFIDDLE:

$(document ).ready(function() {
   console.log( "ready!" );
    $('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
       $('#total').val(       parseFloat($('#total').val())+parseFloat($(this).parent().find('input[type=text]').val()));
    } else {
       $('#total').val( parseFloat($('#total').val())-parseFloat($(this).parent().find('input[type=text]').val()));
    }
});
});

在表单中添加值

Add Values in Form

html

javascript

forms

add