正文

掌握原生JS实现jQuery的value操作：轻松获取和设置表单元素值

/0 浏览量
0414

在网页开发中，对表单元素的操作是基础而又常见的需求。jQuery因其简洁的API和丰富的选择器功能，深受开发者喜爱。然而，随着前端技术的发展，掌握原生JavaScript实现这些功能同样重要。本文将带你一起了解如何使用原生JavaScript来轻松获取和设置表单元素的值。

获取表单元素值

要获取表单元素的值，我们通常使用getElementById()、getElementsByClassName()、getElementsByTagName()等DOM方法来获取元素，然后使用.value属性来读取值。

代码示例

以下是一个简单的示例，展示如何获取单选按钮和复选框的值：

// 获取单选按钮的值
var radioValue = document.getElementById("radio1").value;

// 获取复选框的值
var checkboxValue = document.querySelectorAll('input[type="checkbox"]:checked').map(function(checkbox) {
    return checkbox.value;
});

支持的情况

  • 输入框（<input type="text">、<input type="password">等）
  • 单选按钮（<input type="radio">）
  • 复选框（<input type="checkbox">）
  • 选择框（<select>）

设置表单元素值

设置表单元素的值同样简单。你可以通过获取元素并赋值来实现。

代码示例

以下示例展示如何设置文本框、单选按钮和复选框的值：

// 设置文本框的值
document.getElementById("text1").value = "新值";

// 设置单选按钮的值
document.getElementById("radio1").checked = true;

// 设置复选框的值
document.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
    if (checkbox.value === "checkbox2") {
        checkbox.checked = true;
    }
});

注意事项

  • 在设置复选框和单选按钮的值时，要确保值与元素的value属性匹配。
  • 使用checked属性时，要确保是设置true或false，而不是"true"或"false"。

获取和设置选择框的值

选择框（<select>）的值获取和设置同样简单。

代码示例

以下示例展示如何获取和设置选择框的值：

// 获取选择框的值
var selectValue = document.getElementById("select1").value;

// 设置选择框的值
document.getElementById("select1").value = "option2";

注意事项

  • 选择框的值是通过value属性获取的。
  • 设置值时，要确保是有效的选项值。

总结

通过以上介绍，相信你已经掌握了使用原生JavaScript实现jQuery的value操作。在实际开发中，灵活运用这些方法可以让你更好地控制表单元素，提高代码的可读性和可维护性。

-- 展开阅读全文 --