如何使用jQuery将选定的值重置为默认值

当使用表单或者其他界面元素时，有时候需要重置选定的值为默认值。在这种情况下，jQuery提供了一个方便的方法来实现这一要求。下面是一个基本步骤以及两个示例来讲解如何使用jQuery将选定的值重置为默认值：

步骤一：确定选定元素

首先需要确定需要重置的元素。在jQuery中，可以使用$()方法或者其它选择器方法来选定需要重置的元素，例如：

// 选定id为myInput的元素
var myInput = $('#myInput');

步骤二：将值重置为默认值

在选定元素后，可以使用 jQuery 的 val() 方法将选定的值重置为默认值。例如：

// 将选定元素的值重置为默认值
myInput.val(myInput.prop('defaultValue'));

其中，prop('defaultValue') 方法返回指定元素的默认值属性。这个方法是原生的 JavaScript 方法，jQuery 的 val() 方法可以将返回的属性值设置到选定元素中去。

示例一：单个表单元素的重置

现在我们考虑一个单个表单元素的重置示例。下面的HTML代码会创建一个包含文本输入框和一个按钮的表单。

<form id="myForm">
  <label for="myInput">输入：</label>
  <input type="text" id="myInput" name="myInput" value="默认值" />  
  <button type="button" id="resetBtn">重置</button>
</form>

在这个例子中，我们为文本输入框设置了一个默认的值"默认值"，同时给重置按钮加上了一个点击事件监听器。当点击“重置”按钮时，我们会将输入框的文本值重置为默认值：

$(document).ready(function(){
  // 选定表单和输入元素
  var myForm = $('#myForm');
  var myInput = $('#myInput');

  // 添加重置按钮的点击事件监听
  $('#resetBtn').click(function(e){
    // 阻止默认的提交表单行为
    e.preventDefault();

    // 重置表单中所有元素
    myForm[0].reset();
    // 将输入框的文本值重置为默认值
    myInput.val(myInput.prop('defaultValue'));
  });
});

示例二：多个表单元素的重置

下一个例子是重置多个表单元素。以下的 HTML 代码会在表单中创建一个包含文本输入框、单选按钮和一个按钮的表单：

<form id="myForm">
  <label for="nameInput">姓名：</label>
  <input type="text" id="nameInput" name="nameInput" value="张三" />

  <label>性别：</label>
  <input type="radio" value="男" name="gender" />男
  <input type="radio" value="女" name="gender" checked />女

  <button type="button" id="resetBtn">重置</button>
</form>

在这个例子中，我们使用选择器方法来选定表单中的文本输入框和单选按钮。

$(document).ready(function(){
  // 选定表单和输入元素
  var myForm = $('#myForm');
  var nameInput = $('#nameInput');
  var genderInput = $('input[name="gender"]');

  // 添加重置按钮的点击事件监听
  $('#resetBtn').click(function(e){
    // 阻止默认的提交表单行为
    e.preventDefault();

    // 重置表单中所有元素
    myForm[0].reset();
    // 将姓名输入框的文本值重置为默认值
    nameInput.val(nameInput.prop('defaultValue'));
    // 将单选按钮的选中值重置为默认值
    genderInput.filter('[value="女"]').prop('checked', true);
    genderInput.filter('[value="男"]').prop('checked', false);
  });
});

在这个代码片段中，我们使用prop()方法将genderInput的值设置为默认值。记住，在一个表单中重置多个元素时，必须分别处理每个元素的默认值。