在jQuery上提交表单单击事件仅选择第一个表单

我有一个用Rails构建的待办事项/任务列表类型的应用程序

我有一个类别列表，在类别名称下面有各自的任务

我在每个任务旁边都有一个复选框，当我单击它时，我希望该特定任务的表单提交并更新为complete/imcomplete。我有一个jQuery函数来实现这一点：

$(function(){
  $('input:checkbox').on('click', function(){
    $(this).parents('form').submit();
  });
});

我的表格如下所示（在HAML中）：

输出HTML如下所示：

<form accept-charset="UTF-8" action="/tasks/338" class="edit_task" data-remote="true" id="edit_task_338" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="_method" type="hidden" value="put">
<input name="authenticity_token" type="hidden" value="q7bvSGPr1IDf1p2/SKsssbdiQj+NBWmg/C6zPB3x+jM=">
</div>
<input name="task[complete]" type="hidden" value="0">
<input checked="checked" id="task_complete" name="task[complete]" type="checkbox" value="1">
<label class="338" for="task_complete" id="task-label">another task</label>
<a href="/tasks/338" class="delete-task" data-method="delete" data-remote="true" rel="nofollow">
<i class="icon-remove pull-right"></i></a>
</form>

另一项任务

问题是，当我单击任何复选框时，它不会找到特定任务的表单，而只会选择和切换页面上的第一个任务

任何帮助都将不胜感激

---

谢谢

按照Blender的建议，尝试使用

最近的

而不是

父母

$('input:checkbox').click(function(e){
  $(this).closest('form').submit();
});

---

这是正确的行为。由于您使用的是

input:checkbox

，因此这指的是页面上任何类型为checkbox的输入元素。因此，似乎由于jQuery集包含每个表单的所有复选框，它只处理第一个，可能是因为

submit（）

不能一次处理多个表单

相反，您可以尝试以下任一方法。使用而不是父对象（）

或者将表单的id添加到复选框中，并使用查找其父项。如果您的输入嵌套在表单的更深处，这是很好的，这意味着parent（）不起作用

<input data-form="edit_task_338" checked="checked" id="task_complete" name="task[complete]" type="checkbox" value="1">

//then
$(function(){
      $('input:checkbox').on('click', function(){
        //use the data-attr to retrive the form's id i.e edit_task_338
        $('form[id='+ $(this).data('form')) +']').submit(); 
      });
    });

//然后
$（函数（）{
$（'input:checkbox'）。在（'click'，function（）上{
//使用数据属性检索表单的id，即编辑任务338
$（'form[id='+$（this.data（'form'））+']'））.submit（）；
});
});

---

它们还有一些方法，但涉及到不同的HTML设置。

我尝试了所有这些方法，但都没有成功。我最终通过将任务id添加到标签和复选框输入找到了答案，如下所示：

= f.check_box :complete, id: "task-#{task.id}"
= f.label :name, task.name, for: "task-#{task.id}"

---

现在可以提交正确的表单了。感谢您的输入。

您的表单是否嵌套？另外，请尝试

.closest

而不是

.parents

。

<input data-form="edit_task_338" checked="checked" id="task_complete" name="task[complete]" type="checkbox" value="1">

//then
$(function(){
      $('input:checkbox').on('click', function(){
        //use the data-attr to retrive the form's id i.e edit_task_338
        $('form[id='+ $(this).data('form')) +']').submit(); 
      });
    });

= f.check_box :complete, id: "task-#{task.id}"
= f.label :name, task.name, for: "task-#{task.id}"