javascript - 提交表单后清除复选框

问题描述

我有一个带有按钮和一些复选框的 HTML 表单。复选框的值通过 GET 参数传递到下一页。表单提交的目标是空白页。

<form id="myForm" method="get" action="launch.php" target="_blank">
<input type="submit">Launch</input>
<input type="checkbox" class="checkbox" name="reset" /> Reset
<input type="checkbox" class="checkbox" name="erase" /> Erase
</form>

复选框允许用户在启动 Web 应用程序之前重置和/或删除文件。由于它们是“危险的”，我希望在使用启动应用程序后自动取消选中它们。这是为了帮助防止用户连续两次意外擦除或重置他们的文件。

我向onClick使用 jQuery 取消选中框的按钮添加了一个操作。但是，它们在提交表单之前未选中，因此框的值不包含在 GET 中。

<input type="submit" onClick="uncheckBoxes();" />
...
<script>
function uncheckBoxes() {
    $(".checkbox").prop("checked", false);
}
</script>

我想我想做两件事之一。任何一个：

使用该$("#myForm").submit()功能取消选中复选框，然后打开一个新窗口。但是，我必须编写代码来构建 URL，这不是非常可扩展的（如果我想添加一个新的复选框怎么办？）并且容易出错。或者，
以某种方式连接到正常的表单提交过程并在新页面/选项卡打开后uncheckBoxes执行该功能。由于带有表单的页面/选项卡保持打开状态，我仍然可以运行其他 JS 代码。

对此有什么解决方案？

标签： javascripthtmljquery

$('#submit-button').click(function() {
  var url = "launch.php?";
  $('input[type="checkbox"]').each(function() {
    url = url + this.name + "=" + this.checked + "&"
    this.checked = false;
  });
  url = url.slice(0, -1)
  console.log(url);
  //wondow.open(url, '_blank');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<label>Option 1</label><input name="option1" type="checkbox">
<br>
<label>Option 2</label><input name="option2" type="checkbox">

<button id="submit-button">Submit</button>

这是一种可扩展的方式！

javascript - 提交表单后清除复选框

问题描述

解决方案

推荐阅读