将复选框重置为初始状态。

Question

您可能知道，在表单中重置按钮无法将复选框重置为其初始状态。我该如何使用JavaScript、PHP、jQuery或其他方式实现这一点？
以下是我所拥有的代码：

<form method="POST">
<input type="text" name="name" id="name" value="default value" required >
<input type="checkbox" name="group[]" id="checkbox1" value="0" checked>
<input type="checkbox" name="group[]" id="checkbox2" value="1" >
<button type="reset"> Reset </button>
<button type="submit"> Submit </button>
</form>

- Omid

---

你可以在Javascript中保存初始值，然后在“重置”按钮点击时将该值更改为初始值。 - Nicolas

如果您不明确提供属性，那么将重置复选框；如果您在表单中为任何字段提供默认值，则不会被重置。如果这可以帮助您，如果您希望最初填充这些值，则答案将有所不同。请提供完整信息，说明您真正想要做什么。 - Surya Purohit

你上面的HTML代码对我来说很好用。它将复选框重置为初始状态（即checkbox1被选中，checkbox2未被选中）。也许这是浏览器问题？ - James

请问您能否解释一下您所接受的答案是如何将复选框重置为初始状态的吗？我相信它会取消所有复选框的选中状态。 - Mahesh Singh Chouhan

Answer 1

遍历所有输入元素并取消选中已选中的元素。

var allInputs = $( ":input" );

for(var i = 0; i < allInputs.length; i++) {

   if( $( 'input[type="checkbox"]:checked' ) )
      $( this ).prop('checked', false);
}

正如James指出的那样，这可以在一行代码中完成，就像这样：

$( 'input[type="checkbox"]' ).prop('checked', false);

- Virk Bilal

---

还是只需要 $( 'input[type="checkbox"]' ).prop('checked', false); 就行了吗？ - James

可以这样做。 - Virk Bilal

Answer 2

Try this:

var resetForm = function(){
    $('#form')[0].reset();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="POST" id="form">
<input type="text" name="name" id="name" value="default value" required >
<input type="checkbox" name="group[]" id="checkbox1" value="0" checked>
<input type="checkbox" name="group[]" id="checkbox2" value="1" >
<button type="reset" onclick="resetForm()"> Reset </button>
<button type="submit"> Submit </button>
</form>

- Mahesh Singh Chouhan

---

从jQuery 1.6开始，修改checked属性将不再起作用。您需要使用.prop('checked',false)。 - James

你的意思是在1.6版本之后removeAttr将不再起作用吗？顺便说一下，我正在使用最新的3.2.1版本。 - Mahesh Singh Chouhan

它将取消所有复选框的选择。我不需要那个。如果一个复选框最初被选中了呢？ - Omid

@Omid 更新了我的答案，现在如果它最初被选中，则仅重置更改的复选框。 - Mahesh Singh Chouhan

@Omid，您接受的答案是否对您有用？我想知道它是否会取消所有已选中的复选框，而不是重置表单？ - Mahesh Singh Chouhan