向表单元素添加多个复选框

Question

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

在用户选中一些复选框后，我希望将所有这些复选框（选中或未选中）附加到表单元素中，以便当用户单击“提交”按钮时，表单会考虑复选框，它们的 ID、名称、数据名称和它们的状态（选中或未选中）。这可能吗？

我在这里尝试了一个 codpen：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 选择器 #reservation 代替。要在submit 事件中有效地将复选框添加到form，您可以这样做：

// 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);
    });
});

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

• 您的复选框有 id，如果我们克隆它们，那么您将有重复的 id。由于如果存在重复的 id，则 HTML 无效，因此克隆带有 id 的复选框将导致 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 = "";
    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 放置键值对的位置，其中键将是 checkbox id，值将是它们对应的 checked 状态，并将这些值放入 hidden @ 987654334@ submit 处理程序。如果您不打算将复选框直观地放入表单中并且您对正确处理数据感到满意，那么将键值对的 JSON 值放入 value 的 hidden input 在比较将复选框复制到form，但这些只是细微差别。