jQuery 设置输入值 - JavaScript

在 JavaScript 中使用 jQuery 可以方便地实现对 HTML 元素的操作，其中包括设置输入值。在本文中，我们将介绍如何使用 jQuery 设置文本框、下拉框和多选框的值。

设置文本框的值

通过 jQuery，我们可以使用 val() 方法来设置文本框的值。下面是一个示例代码片段：

// 获取文本框对象
var input = $('#myInput');

// 设置文本框的值
input.val('Hello World!');

在上面的代码片段中，我们首先使用 $ 函数获取了一个 ID 为 myInput 的文本框对象。然后，我们使用 val() 方法将文本框的值设置为 Hello World!。

设置下拉框的值

设置下拉框的值与设置文本框的值类似，也需要使用 val() 方法。下面是一个示例代码片段：

<!-- HTML 代码 -->
<select id="mySelect">
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
</select>

// 获取下拉框对象
var select = $('#mySelect');

// 设置下拉框的值
select.val('Option 2');

在上面的代码片段中，我们首先使用 $ 函数获取了一个 ID 为 mySelect 的下拉框对象。然后，我们使用 val() 方法将下拉框的值设置为 Option 2。

设置多选框的值

要设置多选框的值，我们需要为每个被选中的选项分别设置属性 selected 为 true。下面是一个示例代码片段：

<!-- HTML 代码 -->
<label>
  <input type="checkbox" value="Option 1" id="checkbox1"> Option 1
</label>
<label>
  <input type="checkbox" value="Option 2" id="checkbox2"> Option 2
</label>
<label>
  <input type="checkbox" value="Option 3" id="checkbox3"> Option 3
</label>

// 获取多选框对象
var checkbox1 = $('#checkbox1');
var checkbox2 = $('#checkbox2');
var checkbox3 = $('#checkbox3');

// 设置多选框的值
checkbox1.prop('checked', true);
checkbox3.prop('checked', true);

在上面的代码片段中，我们首先使用 $ 函数获取了三个多选框对象。然后，我们分别将第一个和第三个多选框设置为被选中状态。

以上是在 JavaScript 中使用 jQuery 设置输入值的方法。通过这些方法，我们可以方便地对 HTML 元素进行操作，实现更加复杂的交互效果。