jQuery val() 函数

简介

val()是jQuery中的一个函数，可以用于获取或设置元素的值。

该函数适用于可以输入值的元素，例如input、textarea等。

• 对于单选按钮和复选框时，可以通过设置 checked 属性来设置选项是否被选中。

• 对于 select 元素，则可以通过设置 selectedIndex 属性来设置选项。

语法

//获取元素的值
$(selector).val()

//设置元素的值
$(selector).val(value)

参数说明：

• selector：必填，要获取或设置值的元素。可以是指定元素的ID、HTML元素、DOM元素或者用选择器选中的元素。

• value：可选，待设置的元素值。可以是字符串、数值或者数组。

用法

获取元素的值

示例：

<form>
  <input type="text" id="username" name="username" value="张三">
  <select id="city" name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
  </select>
</form>

let username = $('#username').val();
let city = $('#city').val();

console.log(username); // 输出：张三
console.log(city); // 输出：beijing

设置元素的值

示例：

<form>
  <input type="text" id="username" name="username" value="张三">
  <select id="city" name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
  </select>
</form>

$('#username').val('李四');
$('#city').val('shanghai');

console.log($('#username').val()); // 输出：李四
console.log($('#city').val()); // 输出：shanghai

获取和设置复选框和单选按钮的选中状态

示例：

<form>
  <input type="checkbox" id="agree" name="agree" checked>
  <label for="agree">我同意</label>

  <input type="radio" id="male" name="gender" value="male" checked>
  <label for="male">男</label>

  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label>
</form>

let agree = $('#agree').prop('checked');
let gender = $('input[name="gender"]:checked').val();

console.log(agree); // 输出：true
console.log(gender); // 输出：male

$('#agree').prop('checked', false);
$('#female').prop('checked', true);

console.log($('#agree').prop('checked')); // 输出：false
console.log($('input[name="gender"]:checked').val()); // 输出：female

获取和设置下拉框的选中项

示例：

<form>
  <select id="city" name="city">
    <option selected value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
  </select>
</form>

let city = $('#city option:selected').val();

console.log(city); // 输出：beijing

$('#city').val('shenzhen');

console.log($('#city option:selected').val()); // 输出：shenzhen

注意事项

• val() 函数对于非表单元素或不可见元素无效（例如 div 或 span）。

• 在设置单选按钮或复选框的选中状态时，应使用 prop() 方法，并将参数设置为 checked 。

• 在设置 select 下拉框的选中项时，应将参数设置为被选中的 option 的值。