如何在 Bootstrap 4 模态表单中重置单选按钮和复选框？ [复制]

Posted 2023-03-05

【中文标题】如何在 Bootstrap 4 模态表单中重置单选按钮和复选框？ [复制]

【英文标题】：How to reset radio buttons and checkboxes in a Bootstrap 4 modal form? [duplicate]

【发布时间】：2019-01-08 03:12:31

【问题描述】：

实际上我正在使用 Boostrap 4，我想通过 JS 使用下面的函数重置表单中的所有输入。所有文本输入均已正确重置，但radio 按钮组和复选框不会被取消选择。

$('#new_customer')
  .find(':input')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .removeAttr('checked')
  .removeAttr('selected');
;

我知道原始输入是隐藏的，样式是使用 ::before 和 ::after 伪元素构建的。但是在文档中，我看不到重置这些控件的可能方法。我如何做到这一点？

【问题讨论】：

我的答案怎么样？ ***.com/a/51618515/7733026

【参考方案1】：

改用.prop()

$('#new_customer')
  .find(':input')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .prop('checked', false)
  .prop('selected', false);
;

【讨论】：

请解释为什么 OP 应该使用 .prop()，并附上一个工作示例。

如果你只有一个链接和一些不完整的代码，查看这个答案的人不太可能得到它的帮助。

James，当我看到一个我可以回答的问题时，我会立即尝试使用第一个答案来抢先获得分数。 （你不觉得有人给你点赞的中间回答很烦人吗？）如果 OP 无法阅读我提供的文档或需要一些说明，我很乐意提供帮助

【参考方案2】：

您的代码：

$('#new_customer')
  .find(':input')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .removeAttr('checked')
  .removeAttr('selected');
;

最后有一个意外的;，这将引发错误。

如果您删除它，您的代码就可以正常工作。

$('#new_customer')
  .find(':input')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .removeAttr('checked')
  .removeAttr('selected');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="new_customer">
  <input type="text">
  <input type="text" value="text">
  <input type="checkbox">
  <input type="checkbox" checked>
  <input type="radio">
  <input type="radio" checked>
</div>

jQuery 代码的常用格式如下：

$('#new_customer').find(':input').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');