jQuery | val() 与示例

val() 是 jQuery 提供的一个方法，用来获取或设置表单元素的值。本文将介绍 val() 的用法以及一些示例。

语法

$(selector).val(value)   //value 是可选的，表示要设置的值

参数

• selector：必需，jQuery 选择器，表示要操作的表单元素
• value：可选，表示要设置的值

返回值

• 获取表单元素的值，返回值为该元素的值
• 设置表单元素的值，返回值为 jQuery 对象本身

示例

以下是 val() 的一些常见用法：

获取输入框的值

$('input').val();    //获取第一个输入框的值
$('#username').val();   //获取id为“username”的输入框的值
$('.password').val();   //获取class为“password”的第一个输入框的值

设置输入框的值

$('input').val('hello');    //设置所有输入框的值为“hello”
$('#username').val('admin');    //设置id为“username”的输入框的值为“admin”
$('.password').val('123456');   //设置class为“password”的第一个输入框的值为“123456”

获取单选框和复选框的值

<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<input type="checkbox" name="fruit" value="apple" checked> Apple
<input type="checkbox" name="fruit" value="banana"> Banana
<input type="checkbox" name="fruit" value="orange" checked> Orange

$('input[name="gender"]:checked').val();    //获取选中的单选框的值
$('input[name="fruit"]:checked').map(function(){return $(this).val();}).get().join();    //获取选中的复选框的值，返回值为字符串

获取下拉框的值

<select id="fruits">
  <option value="apple" selected>Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="grape">Grape</option>
</select>

$('#fruits').val();    //获取选中的下拉框的值，返回值为字符串

设置下拉框的值

<select id="fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="grape">Grape</option>
</select>

$('#fruits').val('orange');    //设置选中的下拉框的值为“orange”

以上就是 val() 的介绍和一些示例。需要注意的是，val() 只能用于表单元素，如 <input>、<select> 和 <textarea> 等，而不能用于其他元素。