JavaScript获取与设置表单值的实现方法

更新时间：2025年06月06日 11:47:50 作者：人才程序员

表单是网页中交互的一部分,而通过 JavaScript 获取和设置表单值,不仅能够让你在提交前对数据进行验证和处理,还能实现动态更新表单内容,在本文中,我们将详细介绍如何使用 JavaScript 获取和设置不同类型的表单控件的值,需要的朋友可以参考下

JavaScript 获取与设置表单值的方法

大家好！今天我们来深入了解一下 JavaScript 如何获取和设置表单中的值。表单是网页中交互的一部分，而通过 JavaScript 获取和设置表单值，不仅能够让你在提交前对数据进行验证和处理，还能实现动态更新表单内容。

本文我们将详细介绍如何使用 JavaScript 获取和设置不同类型的表单控件（如输入框、单选框、复选框等）的值。

1. 获取与设置文本框 (<input type="text">) 的值

获取值：

要获取文本框的值，可以使用 .value 属性。

例子：

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <button type="button" onclick="getName()">Get Name</button>
</form>

<script>
  function getName() {
    const name = document.getElementById('name').value;
    console.log('Name:', name);
  }
</script>

设置值：

通过 .value 属性，你也可以设置文本框的值。

例子：

<button type="button" onclick="setName()">Set Name</button>

<script>
  function setName() {
    document.getElementById('name').value = 'Alice';
  }
</script>

2. 获取与设置复选框 (<input type="checkbox">) 的值

获取值：

对于复选框，可以使用 .checked 属性来检查它是否被选中。

例子：

<form id="myForm">
  <label for="subscribe">Subscribe to newsletter</label>
  <input type="checkbox" id="subscribe" name="subscribe">
  <button type="button" onclick="getSubscribeStatus()">Get Subscribe Status</button>
</form>

<script>
  function getSubscribeStatus() {
    const subscribe = document.getElementById('subscribe').checked;
    console.log('Is subscribed:', subscribe);
  }
</script>

设置值：

如果想要选中或取消选中复选框，可以通过 .checked 属性来设置它的状态。

例子：

<button type="button" onclick="setSubscribeStatus()">Set Subscribe Status</button>

<script>
  function setSubscribeStatus() {
    document.getElementById('subscribe').checked = true; // 选中复选框
  }
</script>

3. 获取与设置单选框 (<input type="radio">) 的值

获取值：

获取单选框的值稍微复杂一点。可以使用 .checked 属性来判断某个单选框是否被选中。

例子：

<form id="myForm">
  <label for="male">Male</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="female">Female</label>
  <input type="radio" id="female" name="gender" value="female">
  <button type="button" onclick="getGender()">Get Gender</button>
</form>

<script>
  function getGender() {
    const gender = document.querySelector('input[name="gender"]:checked').value;
    console.log('Selected Gender:', gender);
  }
</script>

设置值：

要选择某个单选框，可以通过 .checked 属性设置它为选中状态。

例子：

<button type="button" onclick="setGender()">Set Gender</button>

<script>
  function setGender() {
    document.getElementById('female').checked = true; // 选中 Female
  }
</script>

4. 获取与设置下拉框 (<select> 和 <option>) 的值

获取值：

对于下拉框，使用 .value 属性来获取选中的 option 的值。

例子：

<form id="myForm">
  <label for="color">Choose a color:</label>
  <select id="color" name="color">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
  </select>
  <button type="button" onclick="getColor()">Get Color</button>
</form>

<script>
  function getColor() {
    const color = document.getElementById('color').value;
    console.log('Selected Color:', color);
  }
</script>

设置值：

要设置下拉框选中的值，可以将 .value 设置为相应的 option 的值。

例子：

<button type="button" onclick="setColor()">Set Color</button>

<script>
  function setColor() {
    document.getElementById('color').value = 'blue'; // 设置选中蓝色
  }
</script>

5. 获取与设置文本区域 (<textarea>) 的值

获取值：

对于文本区域，使用 .value 来获取它的内容。

例子：

<form id="myForm">
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>
  <button type="button" onclick="getMessage()">Get Message</button>
</form>

<script>
  function getMessage() {
    const message = document.getElementById('message').value;
    console.log('Message:', message);
  }
</script>

设置值：

你也可以通过 .value 来设置文本区域的内容。

例子：

<button type="button" onclick="setMessage()">Set Message</button>

<script>
  function setMessage() {
    document.getElementById('message').value = 'Hello, world!'; // 设置默认文本
  }
</script>

小结

在 JavaScript 中，获取和设置表单值是非常常见的操作。通过 .value 和 .checked 属性，我们可以轻松地获取和设置不同类型的表单控件的值。以下是关键点：

文本框 (<input type="text">)：使用 .value 获取和设置值。
复选框 (<input type="checkbox">)：使用 .checked 判断是否选中，并设置选中状态。
单选框 (<input type="radio">)：使用 .checked 判断选中的单选框，并通过 .value 获取选中的值。
下拉框 (<select>)：使用 .value 获取和设置选中的值。
文本区域 (<textarea>)：使用 .value 获取和设置文本内容。

希望大家能够根据这些方法，轻松操作表单，实现更丰富的交互效果！

以上就是JavaScript获取与设置表单值的实现方法的详细内容，更多关于JavaScript获取与设置表单值的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JS实现图片手风琴效果
这篇文章主要为大家详细介绍了JavaScript实现图片手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
微信小程序实现左侧导航栏
这篇文章主要为大家详细介绍了微信小程序实现左侧导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JavaScript函数的4种调用方法详解
了解函数的调用过程有助于深入学习与分析JavaScript代码。本文是JavaScript高级这个系列中的第三篇文章，主要介绍JavaScript中函数的四种使用形式
2014-04-04
JavaScript中的事件监听详细介绍
这篇文章主要给大家介绍了关于JavaScript中事件监听的相关资料,在前端开发过程中我们经常会遇到给页面元素添加事件的问题,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-08-08
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
这篇文章主要介绍了微信小程序学习笔记之跳转页面、传递参数获得数据操作,结合实例形式分析了微信小程序基于navigator组件的页面跳转及数据传递相关操作技巧,并结合图文形式进行详细说明,需要的朋友可以参考下
2019-03-03
JS+HTML5实现图片在线预览功能
这篇文章主要为大家详细介绍了JS+HTML5实现图片在线预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
JS函数本身的作用域实例分析
这篇文章主要介绍了JS函数本身的作用域,结合实例形式分析了JS函数作用域相关原理、操作技巧与使用注意事项,需要的朋友可以参考下
2020-03-03
30分钟快速入门掌握ES6/ES2015的核心内容（下）
这篇文章主要给大家介绍了如何通过30分钟快速入门掌握ES6/ES2015的核心内容的相关资料，之前给大家介绍过基础的一些内容，下面继续来介绍一些其他的新特性，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
2018-04-04
JS测试显示屏分辨率以及屏幕尺寸的方法
如何用JS特效显示自己的屏幕分辨率以及屏幕尺寸呢，你会吗？如果不会，那么下面有个不错的方法，大家可以参考下
2013-11-11
JavaScript原型对象原理与应用分析
这篇文章主要介绍了JavaScript原型对象原理与应用,结合实例形式分析了javascript原型对象的概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
2018-12-12