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

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

请注意，我无法将此隐藏字段添加到表单中，因为我承载此字段的网站不允许使用两个同名表单字段，正如我之前所看到的建议：

由于某些原因，只有在我加载页面、提交表单时未选中所有复选框，然后再次提交表单时，脚本才起作用。如果我重新加载页面，我必须再次执行相同的操作。这表明我指的是：

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

下面是一个示例代码：

这是我的剧本：

$("#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()
);                         

$（“#foo”）。提交(
函数（）{
var formEl=$（this）；//获取表单的引用
调试器；
//在#foo submit action上添加事件侦听器。。。
//对于表单上的每个未选中复选框。。。
formEl.find（“输入：复选框：未（：选中）”）。每个(
//创建一个与复选框同名且值为0的隐藏字段
//你可以很容易地使用“off”、“false”或任何你想得到的词
//当复选框为空时。
功能（索引）{
变量输入=$（“”）；
input.attr（'type'，'hidden'）；
input.attr（'name'，$（this.attr（'name”）；//与复选框同名
input.attr（'value'，'no'）；//或'off'，'false'，'no'，等等
//在提交时将其附加到复选框所在的表单中
append（input）；/$（“#foo”）指的是表单
}//每个（）中的end函数
)；//结束每个（）参数列表
返回true；//不中止表单提交
}//submit（）中的end函数
);                         

您的小提琴工作正常（据我所知）。

---

您可以将所有内容包装到document.ready（）中，或者（这很愚蠢）您在控制台打开时忘记了调试器。

我已更改添加输入标记并防止默认提交，请检查下面的代码，如果需要，请告诉我。。没有写入代码以在选中时设置为“是”

$（函数（）{
$（“#foo”）。提交(
职能（e）{
e、 预防默认值（）；
var formEl=$（this）；//获取表单的引用
调试器；
//在#foo submit action上添加事件侦听器。。。
//对于表单上的每个未选中复选框。。。
formEl.find（“输入：复选框：未（：选中）”）。每个(
//创建一个与复选框同名且值为0的隐藏字段
//你可以很容易地使用“off”、“false”或任何你想得到的词
//当复选框为空时。
功能（索引）{
变量输入=$（“”）；
input.attr（'type'，'hidden'）；
input.attr（'name'，$（this.attr（'name”）；//与复选框同名
input.attr（'value'，'no'）；//或'off'，'false'，'no'，等等
//在提交时将其附加到复选框所在的表单中
append（input）；/$（“#foo”）指的是表单
}//每个（）中的end函数
)；//结束每个（）参数列表
返回true；//不中止表单提交
}//submit（）中的end函数
);                                                 
});
我认为你的做法完全错了

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

有关如何将事件处理程序添加到复选框或表单/页面的更多信息，请参阅jQuery文档。
您的fiddle将在第一次单击时提交表单。。我遗漏了什么。表单确实提交了，但在第一次提交表单时，未选中复选框的值应为“否”。它没有那样做。我不知道如何通过小提琴来表现。所以，我只是用fiddle用script来显示简单表单，我仍然可以在网络选项卡中看到值“no”。。但唯一的区别是，内部功能仅在第二次提交时执行..检查此小提琴。。。我添加了一个已提交表单数据的警报。。看起来不错，我在表单中添加了警报，弹出窗口显示脚本正在工作，但在检查数据文件时，我仍然得到与以前相同的结果。第一次提交显示所有未定义的内容，第二次提交显示复选框正在工作……我应该同时执行这两项操作吗？将脚本包装在document.ready（）中，然后删除调试器？以下是我从您的建议中得到的信息，但仍然看到了相同的问题：此解决方案与其他解决方案一样工作良好，但出于某种原因，它仅适用于第二次提交。我无法在第一次提交时为未选中的框输入“否”。我在选中时将复选框的值设置为“是”，因此现在不需要将其包含在scriptcheck中，我添加了
$（function（）{}
，不幸的是，我仍然得到“undefined”在第一次提交时：我不确定如何提供给您，您能进一步解释吗？我想全面了解代码以帮助您更好地…您能创建一个摆弄示例数据..和字段或模拟其上的场景..这样我就可以添加事件处理程序，如果选中，则什么也不做。如果未选中，则创建隐藏的输入字段，以替换未选中的输入并给它一个值“否”？这是我快速起草的，类似这样的？：或者我应该在这里运行两个函数吗？第一个函数将在加载页面时为所有未选中的复选框提供一个隐藏的输入字段。然后创建第二个函数，该函数将