Question

我尝试使用JavaScript和数据结构时相当新，在尝试学习时，我创建了一个演示：http://codepen.io/anon/pen/avwZaP

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div id="checkList">
        <div class="form-inline checkListItem"><input type="checkbox" id="chk1" /><input type="text" class="form-control" placeholder="Enter checklist item" /></div>
    </div>

    <button id="addCheckbox" class="btn btn-default">Add another item</button>
    <button id="saveData" class="btn btn-primary">Save</button>

    <!--JS-->
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function () {
            var checkCount = 1;
            $("#addCheckbox").click(function (e) {
                e.preventDefault();
                checkCount++;
                $("#checkList").append('<div class="form-inline"><input type="checkbox" id="chk' + checkCount + '" /> <input type="text" placeholder="Enter checklist item" class="form-control"/> <a href="#" id="removeCheckbox">Remove</a></div>');
            });

            $("#checkList").on("click", "#removeCheckbox", function (e) { 
                e.preventDefault();
                $(this).parent('div').remove();
                checkCount--;
            })
        });

    </script>
</body>
</html>

在演示中，我有一个简单的复选框和一个文本框，以及2个按钮。一个按钮动态生成另一个复选框和文本框，以及一个删除它的链接。单击此按钮将允许您添加任意数量的内容。我也有一个保存按钮，现在什么也没做。

我想要做的是能够添加任意数量的复选框/文本框，能够填写它们并检查它们，然后单击“保存”，保存所有内容。页面（复选框/文本框的数量及其状态/值）。这就是我头脑中的一个问题，并试图弄清楚如何做到这一点。

我认为我需要一个对象数组......这个对象是一个＆＃34;清单＆＃34;例如，它有一个复选框和一个文本框，以及每个的值，然后我会将每个对象存储在数组中。这是我倒下的地方，我不确定如何做到这一点。如何循环动态添加的表单元素？如何在JavaScript数据结构中保存它们？

Answer 1

你的理论是正确的。您需要遍历已添加到容器中的每个div（#checklist），并拥有一组对象。每个对象都应存储该行的值。

这是一个可以满足您需求的片段 - 我已经评论了每条线路正在做什么。 HTH！

$('#saveData').click(function(){        // when we click the save button
    var data = [];                      // create a new array to store stuff
    var $rows = $('#checkList > div');  // get a list of the children div's that have been added
    $rows.each(function(){              // for each of those rows...
        var $rowCheckbox = $(this).find('input[type="checkbox"]');    // get a reference to the checkbox in the row 
        var $rowTextbox = $(this).find('input[type="text"]');         // get a reference to the textbox in the row
        var rowData = {};                               // create a new object for the row
        rowData.id = $rowCheckbox[0].id;                // get the id of the checkbox
        rowData.value = $rowTextbox.val();              // get the value of the textbox
        rowData.checked = $rowCheckbox.is(':checked');  // is the checkbox checked?
        data.push(rowData);                             // add object to array
    });
    console.log(data);        // result
});

Here's an updated CodePen.

Answer 2

这是Demo。希望这是你需要的。我正在为每组复选框和文本创建一个具有不同json对象的数组。

<强> HTML

<div id="checkList">
        <div class="form-inline checkListItem"><input type="checkbox" id="chk1" /><input type="text" class="form-control" placeholder="Enter checklist item" /></div>
    </div>

    <button id="addCheckbox" class="btn btn-default">Add another item</button>
    <button id="saveData" class="btn btn-primary">Save</button>

<强> JS

$(document).ready(function () {
            var checkCount = 1;
            $("#addCheckbox").click(function (e) {
                e.preventDefault();
                checkCount++;
                $("#checkList").append('<div class="form-inline"><input type="checkbox" id="chk' + checkCount + '" /> <input type="text" placeholder="Enter checklist item" class="form-control"/> <a href="#" id="removeCheckbox">Remove</a></div>');
            });

            $("#checkList").on("click", "#removeCheckbox", function (e) { 
                e.preventDefault();
                $(this).parent('div').remove();
                checkCount--;
            });

            $("#saveData").click(function (e) {
                var resultArray = [];
                $('#checkList').find('div.form-inline').each(function() {
                    var rowData = {};
                    rowData['checkbox'] = $(this).find('input[type=checkbox]').val();
                    rowData['input'] = $(this).find('input[type=text]').val();
                    rowData['checkboxID'] = $(this).find('input[type=checkbox]').attr('id');
                    resultArray.push(rowData);
                });
                console.log(resultArray);
            });
        });

希望这是你所需要的！

Answer 3

请检查我在您的代码上编辑的内容 Solution

<div id="checkList">
        <div class="form-inline checkListItem"><input type="checkbox" id="chk1" name="group[][chk]" /><input type="text" name="group[][txt]" class="form-control" placeholder="Enter checklist item" /></div>
    </div>

$(document).ready(function () {
          $("#saveData").click(function(){console.log($("#test").serializeArray())});
            var checkCount = 1;
            $("#addCheckbox").click(function (e) {
                e.preventDefault();
                checkCount++;
                $("#checkList").append('<div class="form-inline"><input type="checkbox" name="group[][chk]" id="chk' + checkCount + '" /> <input type="text"  name="group[][txt]" placeholder="Enter checklist item" class="form-control"/> <a href="#" id="removeCheckbox">Remove</a></div>');
            });

            $("#checkList").on("click", "#removeCheckbox", function (e) { 
                e.preventDefault();
                $(this).parent('div').remove();
                checkCount--;
            })
        });

Answer 4

我宁愿建议您创建form而不是循环，然后动态添加/删除字段。点击/提交form serialize您可以SimpleMailMessage mailMessage = new SimpleMailMessage(); mailMessage.setTo(request.getCustomerEmail()); mailMessage.setSubject("someSubject"); mailMessage.setFrom("vincent@myDomain.com"); mailSender.send(mailMessage);整个表单，如果不想重新加载页面，可以通过ajax提交。

创建动态表单元素，如何保存它们及其状态？

4 个答案: