在 Web 开发中，设置输入字段的值是一项基本而且常见的任务。输入字段可以是文本框、下拉列表、单选/多选按钮等，它们都允许用户输入或选择数据。在某些情况下，我们需要通过编程方式设置这些字段的值。
设置输入字段的值的方法
在 JavaScript 中，我们可以使用以下方法来设置输入字段的值：
1. 通过 ID 获取元素并设置值
我们可以通过 document.getElementById 方法获取元素，然后使用 .value 属性设置其值。例如，下面的代码将 ID 为 "my-input" 的文本框的值设置为 "Hello World!":
document.getElementById("my-input").value = "Hello World!";2. 通过 name 获取元素并设置值
如果我们有多个具有相同名称的元素（例如多个复选框或单选按钮），则可以使用 document.getElementsByName 方法获取它们，并设置其中一个元素的值。例如，下面的代码将名称为 "my-checkbox" 的第二个复选框的值设置为 true:
document.getElementsByName("my-checkbox")[1].checked = true;3. 使用 jQuery 设置值
如果您正在使用 jQuery，则可以使用类似于以下代码的语法设置值：
$("#my-input").val("Hello World!");
$("input[name='my-checkbox']:eq(1)").prop("checked", true);示例代码
以下是一个示例，展示如何使用上述方法来设置文本框和单选按钮的值：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------------ -------- ----------------------------------------------------------- ------- ------ ------- ----------- -------------- ----- ------- ------------ --------------- ---------------------- ----- ------- ------------ --------------- ---------------------- ----- ------- ------------ --------------- ---------------------- ----- -------- --------------------------------- --------- ---------- ---------- - -------------------------------------------- - ------ -------- ---------------------------------------------------- - ----- ----- --- ------- ----- ------------------------- --------- ----- ------------------------------------------------- ------ --- ---------- ------- -------
该示例包含一个文本框和三个单选按钮。当用户单击“设置值”按钮时，将会使用 JavaScript 或 jQuery 将文本框的值设置为 "Hello World!"，第二个单选按钮的值设置为 true。
总结
通过本文，我们了解了如何使用 JavaScript 和 jQuery 来设置输入字段的值。这是一项基本而且重要的任务，在编写 Web 应用程序时非常有用。无论您是在构建简单的表单还是复杂的用户界面，都需要掌握此技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8631