快捷導(dǎo)航

JavaScript獲取與設(shè)置表單值的實(shí)現(xiàn)方法

更新時(shí)間：2025年06月06日 11:47:50 作者：人才程序員

表單是網(wǎng)頁(yè)中交互的一部分,而通過(guò) JavaScript 獲取和設(shè)置表單值,不僅能夠讓你在提交前對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證和處理,還能實(shí)現(xiàn)動(dòng)態(tài)更新表單內(nèi)容,在本文中,我們將詳細(xì)介紹如何使用 JavaScript 獲取和設(shè)置不同類型的表單控件的值,需要的朋友可以參考下

1. 獲取與設(shè)置文本框 (<input type="text">) 的值
2. 獲取與設(shè)置復(fù)選框 (<input type="checkbox">) 的值
3. 獲取與設(shè)置單選框 (<input type="radio">) 的值
4. 獲取與設(shè)置下拉框 (<select> 和 <option>) 的值
5. 獲取與設(shè)置文本區(qū)域 (<textarea>) 的值
小結(jié)

JavaScript 獲取與設(shè)置表單值的方法

大家好！今天我們來(lái)深入了解一下 JavaScript 如何獲取和設(shè)置表單中的值。表單是網(wǎng)頁(yè)中交互的一部分，而通過(guò) JavaScript 獲取和設(shè)置表單值，不僅能夠讓你在提交前對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證和處理，還能實(shí)現(xiàn)動(dòng)態(tài)更新表單內(nèi)容。

本文我們將詳細(xì)介紹如何使用 JavaScript 獲取和設(shè)置不同類型的表單控件（如輸入框、單選框、復(fù)選框等）的值。

1. 獲取與設(shè)置文本框 (<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>

設(shè)置值：

通過(guò) .value 屬性，你也可以設(shè)置文本框的值。

例子：

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

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

2. 獲取與設(shè)置復(fù)選框 (<input type="checkbox">) 的值

獲取值：

對(duì)于復(fù)選框，可以使用 .checked 屬性來(lái)檢查它是否被選中。

例子：

<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>

設(shè)置值：

如果想要選中或取消選中復(fù)選框，可以通過(guò) .checked 屬性來(lái)設(shè)置它的狀態(tài)。

例子：

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

<script>
  function setSubscribeStatus() {
    document.getElementById('subscribe').checked = true; // 選中復(fù)選框
  }
</script>

3. 獲取與設(shè)置單選框 (<input type="radio">) 的值

獲取值：

獲取單選框的值稍微復(fù)雜一點(diǎn)。可以使用 .checked 屬性來(lái)判斷某個(gè)單選框是否被選中。

例子：

<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>

設(shè)置值：

要選擇某個(gè)單選框，可以通過(guò) .checked 屬性設(shè)置它為選中狀態(tài)。

例子：

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

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

4. 獲取與設(shè)置下拉框 (<select> 和 <option>) 的值

獲取值：

對(duì)于下拉框，使用 .value 屬性來(lái)獲取選中的 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>

設(shè)置值：

要設(shè)置下拉框選中的值，可以將 .value 設(shè)置為相應(yīng)的 option 的值。

例子：

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

<script>
  function setColor() {
    document.getElementById('color').value = 'blue'; // 設(shè)置選中藍(lán)色
  }
</script>

5. 獲取與設(shè)置文本區(qū)域 (<textarea>) 的值

獲取值：

對(duì)于文本區(qū)域，使用 .value 來(lái)獲取它的內(nèi)容。

例子：

<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>

設(shè)置值：

你也可以通過(guò) .value 來(lái)設(shè)置文本區(qū)域的內(nèi)容。

例子：

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

<script>
  function setMessage() {
    document.getElementById('message').value = 'Hello, world!'; // 設(shè)置默認(rèn)文本
  }
</script>