Question

我们假设：一个页面在表单元素之外有一些动态生成的复选框。

在用户检查了一些复选框之后，我很乐意将所有这些复选框（已选中或未选中）附加到表单元素中，以便当用户单击＆＃34;提交＆＃34;按钮，表单考虑了复选框，它们的ID，名称，数据名称及其状态（选中或未选中）。这可能吗？

我在这里试过一个码头：https://codepen.io/anthonysalamin/pen/ZxvZpP?editors=1010但是没有成功。

jQuery代码：

//insert all checkbox input elements into the form id="reservation"
  $("#reservation").submit(function(evt) {
  // should append all checkboxes to the form
  $("<input type='checkbox' />").append("#reservation");
});

Screenshot of my codpen here

Answer 1

.append()期望文本HTML作为输入。您已通过id的{{1}}选择器。要有效地将复选框添加到#reservation事件中的form，您可以执行以下操作：

submit

但是，您的意图极有可能与行为不同。代码问题：

您的复选框有ID，如果我们克隆它们，那么您将有重复的ID。由于如果存在重复ID，HTML无效，则使用ids克隆复选框将导致HTML无效
已检查状态未被复制，因此您需要挖掘该值并将其放入新创建的复选框

处理所有这些问题的代码：

// wait for DOM to be ready
$( document ).ready(function() {
    //define the variable for all checkboxes on the page
    var allCheckboxes = $("input:checkbox[class=outsider]"); 
    //calls the append function on form submission
    $("#form-element").submit(function(event) {
        //insert all checkbox type elements into the form with id="form-element"
    var checkHTML = "";
    for(var checkboxIndex = 0; checkboxIndex < allCheckboxes.length; checkboxIndex++) {
      checkHTML += allCheckboxes[checkboxIndex].outerHTML;
    }
        $("#form-element").append(checkHTML);
    });
});

因此，如果处理所有问题，您可以通过克隆复选框来解决问题。或者，您可以使用// wait for DOM to be ready $( document ).ready(function() { //define the variable for all checkboxes on the page var allCheckboxes = $("input:checkbox[class=outsider]"); //calls the append function on form submission $("#form-element").submit(function(event) { //insert all checkbox type elements into the form with id="form-element" var checkHTML = ""; var checked = []; for(var checkboxIndex = 0; checkboxIndex < allCheckboxes.length; checkboxIndex++) { checked.push($(allCheckboxes[checkboxIndex]).prop('checked')); allCheckboxes[checkboxIndex].remove(); checkHTML += allCheckboxes[checkboxIndex].outerHTML; } $("#form-element").append(checkHTML); allCheckboxes = $('input:checkbox[class=outsider]'); console.log(checked); for (var checkboxIndex = 0; checkboxIndex < allCheckboxes.length; checkboxIndex++) { $(allCheckboxes[checkboxIndex]).prop('checked', checked[checkboxIndex]); } event.preventDefault(); }); }); hidden放置键值对，其中键为input ID，值将为其对应的checkbox个状态并放置这些值在checked处理程序的hidden input中。如果您没有特意打算将复选框直观地放入表单中，并且您对正确处理数据感到满意，那么将键值对的JSON值放入submit {{value hidden复制复选框与input相比，1}}更优越，但这些只是细微差别。

向表单元素

1 个答案: