Question

我正在制作一个程序，其中我希望添加动态文本框作为最终结果。我想在最终结果框中添加所有第3个框值，如果点击删除，相应的值应从最终结果中扣除...

这是代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ol id="boxes">
</ol>
<input type="button" value="Add a row" id="add_boxes" />
<br> final result of all 3rd boxes:
<input type="text" value="" id="final_result" />
<script>
var add = $('#add_boxes');
var all = $('#boxes');
var amountOfInputs = 2;
var maximumBoxes = 10;

add.click(function(event) {

    // create a limit
    if ($(".box").length >= maximumBoxes) {
        alert("You cannot have more than 10 boxes!");
        return;
    }

    var listItem = $('<li class="box"></li>');
    // we will add 2 boxes here, but we can modify this in the amountOfBoxes value
    for (var i = 0; i < amountOfInputs; i++) {
        listItem.append('<input type="text" class="input" />');
    }
    listItem.append('<input type="text" class="output" name="value" placeholder="3rd box"/>');
    // Lets add a link to remove this group as well, with a removeGroup class
    listItem.append('<input type="button" value="Remove" class="removeGroup" />')
    listItem.appendTo(all);
});

// This will tie in ANY input you add to the page. I have added them with the class `input`, but you can use any class you want, as long as you target it correctly.
$(document).on("keyup", "input.input", function(event) {
    // Get the group
    var group = $(this).parent();
    // Get the children (all that arent the .output input)
    var children = group.children("input:not(.output)");
    // Get the input where you want to print the output
    var output = group.children(".output");
    // Set a value
    var value = 0;
    // Here we will run through every input and add its value
    children.each(function() {
        // Add the value of every box. If parseInt fails, add 0.
        value += parseInt(this.value) || 0;
        var a = parseInt(value);
    });
    // Print the output value
    output.val(value);
    document.getElementById('final_result').value = value;



    var test = document.getElementById('final_result').value
    var b = parseInt(test) + parseInt(a);
    alert(a);

});

// Lets implement your remove field option by removing the groups parent div on click
$(document).on("click", ".removeGroup", function(event) {
    event.preventDefault();
    $(this).parent(".box").remove();
});
</script>

Answer 1

$('.clickMe').on('click', function() {

    var total=0;
    var myInput1Vals = $("#boxes").find('.output').map(function() {
        total += parseInt(this.value)
        console.log("total : "+total);

        return this.value;

    });

    $("#final_result").val(total);
});

添加数字的新功能

 function addNum(){
    var total=0;
        var myInput1Vals = $("#boxes").find('.output').map(function() {
            total += parseInt(this.value)
            console.log("total : "+total);

            return this.value;

        });
        $("#final_result").val(total);
    }

第3个BOX上的KEYUP功能

$('#boxes').on('keyup','.output', function() {
       addNum();
 });

FIDDLE DEMO

Answer 2

您的变量value仅包含一行的总和。这是您稍后添加到最终结果中的内容：

document.getElementById('final_result').value = value;

相反，您可能希望这样做以循环所有行的总和（即所有具有类output的元素）：

//...

output.val(value);

var totValue = 0;
$('.output').each(function() {
    totValue += parseInt(this.value, 10) || 0;
});
//document.getElementById('final_result').value = value;
$('#final_result').val(totValue);    

//...

另外，对于您的移除功能：

$(document).on("click", ".removeGroup", function(event) {
    event.preventDefault();
    var removedValue = parseInt($(this).parent().find('.output').val(), 10) || 0;
    var prevValue = parseInt($('#final_result').val(), 10) || 0;
    $('#final_result').val(prevValue - removedValue);
    $(this).parent(".box").remove();
});

概念证明：http://jsfiddle.net/thzmLoya/3/

如何将动态创建的文本框值传递给jquery中的数组

2 个答案: