将复选框重置为初始状态

Posted 2023-03-05

【中文标题】将复选框重置为初始状态

【英文标题】：Reset checkbox to initial status

【发布时间】：2017-12-08 04:17:22

【问题描述】：

您可能知道，表单中的重置按钮无法将复选框重置为其初始状态。我怎样才能使用 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>

【问题讨论】：

您可以将初始值保存在 Javascript 中，然后在单击其余按钮时将值更改为初始值。

如果您不具体提供属性，则会重置复选框，如果您将默认值赋予表单中的任何字段，则不会重置。如果这有帮助，如果您希望最初填充这些值，答案会有所不同。请提供您真正想做的完整信息..

您上面的 html 对我来说很好用。它（即复选框 1 被选中而复选框 2 未选中）。可能是浏览器问题？

您能否解释一下您接受的答案如何？我相信它会取消选中所有复选框

【参考方案1】：

试试这个：

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>

【讨论】：

从 jQuery 1.6 开始，修改 checked attr 将不再有效。你需要.prop('checked',false)。

1.6 之后是什么意思removeAttr 将不起作用？顺便说一句，我正在使用3.2.1 最新的一个

它将取消选中所有复选框。我不需要。如果最初选中了一个复选框怎么办？

@Mahesh Singh Couhan 正确。这是一个代码笔：codepen.io/jamespoel/pen/MoXwzP

@Omid 更新了我的答案，现在如果它最初被选中，那么它只会重置更改的复选框

【参考方案2】：

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

var allInputs = $( ":input" );

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

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

或者正如詹姆斯指出的那样，这可以像这样在一行中完成：

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

【讨论】：

或者只是$( 'input[type="checkbox"]' ).prop('checked', false); ??

是的，可以这样做