在窗体中添加值

Add Values in Form

本文关键字：添加 窗体      更新时间：2023-10-25

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

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

参见JSFiddle

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

这应该做到：

<!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
  • 我添加了一个脚本部分来完成这项工作
var t=0;
for (i=1; i<=3; i++) {
t = t + document.getElementById('value' + i).value;
}
document.getElementById('total').value = t;

请使用以下代码

        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>

使用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()));
    }
});
});
相关文章：