代码之家 › 专栏 › 技术社区 › Anthony Salamin

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

append checkbox forms

Anthony Salamin · 技术社区 · 6 年前

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

在用户选中一些复选框后,我希望将所有这些复选框(选中或未选中)附加到表单元素中,以便当用户单击“提交”按钮时,表单会考虑这些复选框、它们的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

1 回复 | 直到 6 年前

Lajos Arpad 6 年前

.append() 需要文本HTML作为输入。您已通过 id 选择器 #reservation 相反有效地将复选框添加到 form 在 submit 事件您可以执行以下操作:

// 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 并将这些值放入 隐藏的 输入 在 提交 处理程序。如果您不打算直观地将复选框放入表单中,并且对数据的正确处理感到满意,那么将键值对的JSON值放入 value 的 隐藏的 输入 与将复选框复制到 类型 ,但这些只是细微差别。