jQuery 赋值给具有相同name属性的input元素

jQuery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。本篇文章将介绍如何使用jQuery为具有相同name属性的input元素赋值。

背景知识

在HTML中，name属性用于标识表单元素，以便在提交表单时能够识别它们。例如，如果你有一个包含多个输入框的表单，它们可能具有相同的name属性，这样在表单提交时，服务器可以接收到这些输入框的值。

jQuery选择器

在jQuery中，选择器用于选取页面上的HTML元素。例如，$('input[name="myInputName"]')这个选择器会选择所有name属性为"myInputName"的input元素。

代码示例

假设我们有一个简单的HTML表单，包含两个具有相同name属性的input元素：

<form id="myForm">
  <input type="text" name="myInputName" value="初始值1">
  <input type="text" name="myInputName" value="初始值2">
  <button type="button" id="setValueButton">赋值</button>
</form>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

我们的目标是使用jQuery为这两个input元素赋上相同的新值。以下是实现这一目标的jQuery代码：

$(document).ready(function() {
  $('#setValueButton').click(function() {
    // 使用选择器选取所有name属性为'myInputName'的input元素
    var newValue = '新值';
    $('input[name="myInputName"]').val(newValue);
  });
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

类图

以下是使用Mermaid语法创建的类图，展示了input元素与name属性之间的关系：

Input + type : string + name : string + value : string name --> "myInputName"

引用形式的描述信息

在上述代码示例中，$(document).ready(function() {...}); 确保了DOM完全加载后，jQuery代码才会执行。$('#setValueButton').click(function() {...}); 为按钮添加了一个点击事件监听器，当按钮被点击时，会执行内部的函数。

结尾

通过这篇文章，我们学习了如何使用jQuery为具有相同name属性的input元素赋值。这在处理具有多个相同字段的表单时非常有用。jQuery的选择器功能强大，能够快速定位到我们需要操作的元素。希望这篇文章能够帮助你更好地理解和使用jQuery。