问题

只有在复选框选中时才自动提交表单。

所以我一直在寻找类似的东西有一段时间了，但没有找到合适的答案。我有一个复选框输入，根据它是选中还是未选中，有两种不同的作用。我找到的答案大致如下：

```html
<input onChange="this.form.submit()" ... />

或者使用 HTML：

<form method="post" id="form2">
  <input type="checkbox" value="on" id="switch" onchange="submit()">
</form>

JavaScript 部分：

function submit () {
  $("#switch").change(function() {
    console.log($("#switch").val());
    $('#form2').delay(200).submit();
  });
}

正如你所看到的，这个函数无论输入被选中还是取消选中，都会起作用，而我只想在它被选中时（或者只在它被取消选中时）才起作用。我可以使用一个 PHP 技巧来临时禁用 onchange 事件，但我认为这不是一个好的做法。有人能帮忙吗？
谢谢

<details>
<summary>英文:</summary>

auto Submmiting a form only when a checkbox is checked.

so i&#39;ve been searching for something like this for awhile and didn&#39;t found the proper answer, i&#39;ve got a chechbox input that has 2 diffrent roles depending on whether it&#39;s checked or unchecked. the answers that i&#39;ve found were something like this:

<input onChange="this.form.submit()" ... />

or html:

<form method="post" id="form2">

<input type="checkbox" value="on" id="switch" onchange="submit()">
</form>

js:

function submit () {
$("#switch").change(function() {
console.log($("#switch").val());
$('#form2').delay(200).submit();
});
}

as you can see this function will work whether the input gets checked or unchecked and i only want it to work when it gets checked (or only when it gets unchecked).
i can use a php trick to deactivate the onchange event temporarily but i don't think that's a good way to do it.
can anyone help here?
thanks




</details>


# 答案1
**得分**: 0

你已经走了一半的路。附加`change`事件不是一个坏主意。问题在于“checked”和“unchecked”都是改变事件。因此，无论它是被选中还是取消选中，您的函数都会被执行。

解决方案是在您在change事件上运行的函数内部检查复选框是选中还是取消选中：

```javascript
// 确保在执行此JS代码之前加载DOM
document.addEventListener("DOMContentLoaded", function(ev){

  // 获取复选框元素
  const checkBoxSwitch = document.getElementById('switch');

  // 附加事件处理程序到复选框
  checkBoxSwitch.addEventListener("change", function(e){
  	
    // 如果复选框被选中
    if(checkBoxSwitch.checked == true) {
      console.log("复选框已被选中，提交表单");
    }
    // 如果复选框未被选中
    else {
      console.log("复选框未被选中，不要提交表单");
    }
  });
});

<form method="post" id="form2">
  <input type="checkbox" value="on" id="switch"> 勾选以提交！
</form>

我已经对代码进行了注释，以便您了解它是如何工作的。

// Make sure the DOM is loaded before executing this JS code
document.addEventListener("DOMContentLoaded", function(ev){

  // Get the checkbox element
  const checkBoxSwitch = document.getElementById('switch');

  // Attach an event handler to the checkox
  checkBoxSwitch.addEventListener("change", function(e){
  	
    // In case the checkbox is checked
    if(checkBoxSwitch.checked == true) {
      console.log("The checbkox is checked, submit form");
    }
    // In case the checkbox is not checked
    else {
      console.log("The checkbox is not checked. Do not submit form");
    }
  });
});

<form method="post" id="form2">
  <input type="checkbox" value="on" id="switch"> Check me to submit!
</form>