jQuery 表单提交后取消选中单选按钮：详解与最佳实践

2024-03-10 19:33:41

jQuery 表单提交后：轻松取消选中单选按钮

作为一名经验丰富的程序员和技术作家，我经常遇到开发人员在使用 jQuery 提交 AJAX 表单后取消选中单选按钮时遇到的困难。本文将深入探讨这一问题，提供详细的解决方案，并分享相关的最佳实践。

问题：单选按钮未取消选中

在清除表单时，开发人员经常使用以下代码：

$('#frm input[type="radio":checked]').each(function(){
      $(this).checked = false;  
  });

然而，此代码无法取消选中单选按钮。值 $(this).checked 不会将单选按钮设置为未选中状态，而是返回当前的选中状态。

解决方案：使用 `prop()` 方法

要取消选中单选按钮，可以使用 prop() 方法将 checked 属性设置为 false：

$('#frm input[type="radio"]').each(function(){
      $(this).prop('checked', false);  
  });

通过修改代码，我们可以确保在提交 AJAX 表单后取消选中所有单选按钮。

示例

以下示例演示了如何在提交 AJAX 表单后使用 jQuery 取消选中单选按钮：

HTML：

<form id="frm">
  <input type="radio" name="gender" value="male" checked> Male
  <input type="radio" name="gender" value="female"> Female
</form>
<button type="button" onclick="clearForm()">Clear Form</button>

JavaScript：

function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio"]').each(function(){
      $(this).prop('checked', false);  
  });
 }