javascript - 提交表单失败时运行函数

Question

我的网页中有以下一组复选框

<form id="tagselect" action="">
<input id="tag" type="checkbox" value="*">Show all</input>
<input id="tag" type="checkbox" value=".Name1">Name1</input>
<input id="tag" type="checkbox" value=".Name2">Name2</input>
<input type="button" value="submit"></input>
</form>

我想让一个函数在按下提交按钮时运行，或者删除提交按钮并使其在任何复选框更改时运行。

我已经尝试了几乎所有不同的方法来实现这一点，正如这个老问题中所建议的: run a function after checkbox checked and pushed submit button with jquery 加上对它们的一些不同的调整只是随机的预感，当选中复选框时，除了出现复选标记之外，我无法发生任何事情。我测试了一个简单的:

alert("This is working");

当它只是在没有条件的脚本 block 中运行时它工作得很好，但是一旦我将它放在某个脚本的中间以使其在选中复选框或按下按钮时运行，就会出现警报无论如何都不会出现。

我尝试过的一些事情:

<script>
$("input[id='tag']:checked").each(
    function() {
        alert("This is working");
    }
);
</script>

尝试2:

<script>
$("input#tag :checked").each(
    function() {
        alert("This is working");
    }
);  
</script>

尝试3:

<script>
$('#tagselect').submit(function(){
$('#tag:checked').each(function()
      {
         alert("This is working");
      })
 });
</script>

尝试4:

<script>
$('input[value=submit]').on('click', myFunction);

然后在新的脚本 block 或相同的脚本 block 中(都尝试过):

function myFunction() {
alert("This is working");
}
</script>

我也尝试了相同的 myFunction，但是使用

onclick="myFunction()"

添加到提交按钮 html

除了单击按钮或检查这些运行中的复选框之外，绝对没有发生任何明显的事情。

我还尝试将所有脚本放在头部，放在正文中，分别放在将要使用的地方，我已经三重检查了拼写和大小写在实际副本中是否一致。我已经删除了提交按钮并尝试了其中一些没有它的按钮。我尝试过切换浏览器，以防出现兼容性问题。我对 JS 的了解不够，甚至不知道从哪里开始研究我做错了什么。

Answer 1

我不知道为什么你不让它工作。一件事是，您可能需要preventDefault对表单元素的操作。而且没有</input> 。正确地学习它。下面是示例脚本。

所以你需要注意的事情:

1. 阻止默认事件:event.preventDefault(); .
2. 否 </input>标签。
3. 将所有内容封装在$(document).ready()内事件。
4. <input /> 的类型应该是submit而不是button .
5. 您的 HTML 包含重复的 id s。 ID 应该是唯一的，否则不起作用。

您尝试过的那些脚本仅加载一次。要在选中按钮时发出警报，您需要设置如下条件:

$(function () {
  $("input:checkbox").click(function () {
    if ($(this).is(":checked"))
      alert("Yay! Checked");
  });
});

最后，要在表单提交上运行函数，您需要使用以下代码:

$("#tagselect").submit(function (e) {
  e.preventDefault();
  alert("Submitted");
});

片段

$(function () {
  $("input:checkbox").click(function () {
    if ($(this).is(":checked"))
      alert("Yay! Checked");
  });
  $("#tagselect").submit(function (e) {
    e.preventDefault();
    alert("Submitted");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="tagselect" action="">
  <input name="tag" type="checkbox" value="*" /> Show all
  <input name="tag" type="checkbox" value=".Name1" /> Name1
  <input name="tag" type="checkbox" value=".Name2" /> Name2
  <input type="submit" value="submit" />
</form>