javascript - 为什么我的表单脚本只适用于第二次提交

Question

我正在尝试将脚本添加到我的 html 表单中，该脚本将删除所有未选中的复选框并将它们替换为隐藏字段和值“否”。如果复选框被选中，它们将显示值"is"。

请注意，我无法将这个隐藏字段添加到表单中，因为我托管它的网站不允许两个同名的表单字段，正如我之前看到的建议:Post the checkboxes that are unchecked

出于某种原因，该脚本仅在我加载页面、提交未选中所有复选框的表单，然后再次提交表单时有效。如果我重新加载页面，我必须再次做同样的事情。这显示了我所指的内容:https://gfycat.com/HarshWaterloggedKestrel

是因为我在第一次提交表单后添加了事件监听器吗？

这是一个带有示例代码的 fiddle :https://jsfiddle.net/gvd1jr0o/6/

这是我的脚本:

$("#foo").submit(
  function() {
    var formEl = $(this);//get the reference of the form
    debugger;
    // Add an event listener on #foo submit action...
    // For each unchecked checkbox on the form...
    formEl.find("input:checkbox:not(:checked)").each(

      // Create a hidden field with the same name as the checkbox and a value of 0
      // You could just as easily use "off", "false", or whatever you want to get
      // when the checkbox is empty.
      function(index) {
        var input = $("<input>");
        input.attr('type', 'hidden');
        input.attr('name', $(this).attr("name")); // Same name as the checkbox
        input.attr('value', "no"); // or 'off', 'false', 'no', whatever

        // append it to the form the checkbox is in just as it's being submitted
        formEl.append(input); //$("#foo") is referring to the form

      } // end function inside each()
    ); // end each() argument list

    return true; // Don't abort the form submit

  } // end function inside submit()
);                         

Answer 1

我认为你的做法完全错误。

首先，将 onLoad 事件处理程序添加到您的表单或页面，为所有未选中的复选框创建复选框。然后，在您的复选框元素上创建一个事件处理程序，当复选框的选中状态发生变化时，该事件处理程序会创建或删除该复选框的相关输入元素。这样，您的复选框在您提交表单时就已创建。我认为您目前遇到了竞争条件，即在创建复选框之前提交了表单。

您可以查阅 jQuery 文档以获取有关如何将事件处理程序添加到复选框或表单/页面的更多信息。