将多个复选框添加到表单元素 [英] adding multiple checkboxes to a form element

问题描述

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

Let's suppose: a page with some dynamically generated checkboxes outside of a form element.

在用户选中了某些复选框之后，我想附加所有这些复选框（已选中或未选中）进入表单元素，以便用户单击提交按钮时，表单会考虑这些复选框，其ID，名称，数据名称及其状态（选中或未选中）。可以吗？

After the user has checked some of the checkboxes, I would love to append all those checkboxes (either checked or unchecked) into the form element so that when the user click the "submit" button, the form takes into account the checkboxes, their ids, names, data-names and their status (checked or unchecked). Is that possible ?

我在这里尝试过一种鳕鱼： https://codepen.io/anthonysalamin/pen/ZxvZpP?editors=1010 但未成功。

I have tried a codpen here: https://codepen.io/anthonysalamin/pen/ZxvZpP?editors=1010 but was unsuccessful sofar.

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

我的鳕鱼的屏幕快照

推荐答案

.append（ ）希望将文本HTML作为输入。您已通过 #reservation 的 id 选择器。为了有效地将复选框添加到 submit 事件中的表单中，您可以执行以下操作：

.append() expects textual HTML as input. You have passed the id selector of #reservation instead. To effectively add the checkboxes to the form in the submit event you could do this:

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

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

However, it is highly probable that your intention differs from the behavior. Problems with the code:

• 您的复选框具有ID，如果我们将其克隆，则您将具有重复的ID。由于如果ID重复，则HTML无效，因此克隆具有ID的复选框将导致无效的HTML


• 已检查状态不会被复制，因此您需要挖掘该值并放入到新创建的复选框

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

Code dealing with all these problems:

// 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和值将是其对应的已选中状态，并将这些值放入隐藏提交处理程序中输入c $ c> 输入。如果您不打算在外观上直观地放置复选框，并且对数据的正确处理感到满意，则将键值对的JSON值放入 value 隐藏 输入的效果优于将复选框复制到表单，但这只是细微差别。

So you can solve your problem by cloning the checkboxes if you handle all the problems. Alternatively, you could use a hidden input where you could put key-value pairs, where the keys will be checkbox ids and values will be their corresponding checked states and put those values into the hidden input at the submit handler. If you do not specifically intend to visually put the checkboxes into the form and you are satisfied with correct handling of data, then putting the JSON value of key-value pairs into the value of a hidden input is superior in comparison of copying checkboxes into the form, but these are only nuances.

这篇关于将多个复选框添加到表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！