javascript - 相当于 $(this).parent().submit() 的普通 JavaScript 是什么？

Question

我正在尝试使用 HTML 和 JavaScript 提交一个表单。我已将一个事件监听器附加到我的复选框 (.checkbox)，它等待单击，单击后启动一个尝试提交表单的函数。

我已经成功使用了 jQuery 的 .parent() 用法，但现在尝试将其切换到普通 JS。

我已经尝试过 this.parentNode.submit();，但是它返回了错误消息。

this.parentNode.submit is not a function at HTMLInputElement.formSubmit

是否有可能通过将 jQuery $(this).parent().submit() 替换为普通 JS 等效项来提交表单？

HTML:

<form id="theform" action="/phones/search_results" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓">
  <label>
    <input type="checkbox" name="brand_name" id="brand_name" value="Apple" class="Apple brand checkbox" style="height: 30px;">
        Apple

  </label>

$(function() {
  var checkbox = document.querySelectorAll(".checkbox");
  for (var i = 0; i < checkbox.length; i++) {
    checkbox[i].addEventListener("click", formSubmit)
  }

});
function formSubmit(){
  if(this.checked){
    $(this).parent().submit();
    console.log("Form was submitted" + this.parentNode)
  }
}

Answer 1

您可以选择封闭的表单元素并按如下方式提交:

element.closest( 'form' ).submit();

这会忽略任何嵌套，并且不需要您自己循环遍历表单。它的功能类似于 querySelector，因为它也可以返回 null，因此请注意这一点，因为如果它没有嵌套在表单中，它会抛出错误。

MDN https://developer.mozilla.org/en-US/docs/Web/API/Element/closest