javascript怎麼取得值

隨著現代web開發的快速發展，javascript已成為web前端開發中最重要的語言之一。在javascript中，獲取值是一項非常基礎且重要的操作，也是日常開發工作中不可或缺的一部分。本文將會介紹javascript取得不同類型的值的方法和技巧，並提供一些實用的案例。

一、取得輸入框的值

在web開發中，我們通常需要從使用者取得輸入數據，如表單輸入框中的使用者輸入。 javascript提供了幾種方法來取得輸入框的值，包括：

1. 透過id取得輸入框

最簡單的一種取得輸入框的方法就是透過id取得元素，然後取得元素的value值。例如，對於一個id為"input"的輸入框，可以使用以下程式碼來取得它的值：

let inputEle = document.getElementById('input');
let inputValue = inputEle.value;

2. 透過name取得輸入框

除了透過id取得輸入框，我們也可以透過name屬性取得輸入框。這種方法適用於包含多個輸入框的表單，我們可以透過循環遍歷表單元素的方式取得到指定name屬性的輸入框元素。

let forms = document.forms;
for (let i = 0; i < forms.length; i++) {
  let inputEle = forms[i].elements['username'];
  let inputValue = inputEle.value;
}

二、取得單選方塊和複選框的值

在表單中，我們也經常需要取得單選方塊和複選框的值。和取得輸入框的值不同，取得單選框和複選框的值需要使用一些不同的方法。

1. 取得選取的單選框值

對於單選框，我們需要循環遍歷單選框，找到選取的元素並取得其value值。

let radios = document.getElementsByName('gender');
let radioValue;
for (let i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    radioValue = radios[i].value;
    break;
  }
}

2. 取得多個複選框的值

對於複選框，我們可能需要取得選取的複選框的多個值。這個時候，我們需要用到循環遍歷複選框的方法，並將選取的複選框的值儲存在一個陣列中。

let checkboxes = document.getElementsByName('hobbies');
let checkboxValues = [];
for (let i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    checkboxValues.push(checkboxes[i].value);
  }
}

三、取得下拉清單的值

下拉清單也是常見的表單元素，我們需要從中取得選取的值。和單選框一樣，我們需要循環遍歷下拉列表，找到被選中的元素並獲取其value值。

let selectEle = document.getElementById('city');
let selectValue = selectEle.options[selectEle.selectedIndex].value;

四、取得URL參數的值

在web開發中，我們常常需要取得URL中的參數值。 javascript提供了一些方法來取得URL中的參數值，如URLSearchParams和location.search屬性等。

1. URLSearchParams

URLSearchParams是一個新的API，可以很方便地解析URL查詢字串。我們可以使用它的get方法來取得指定參數的值。

let params = new URLSearchParams(location.search);
let id = params.get('id');

2. location.search

如果你想取得 URL 中的參數值，你可以使用全域物件 window 物件的 location.search 屬性。 location.search 會傳回 URL 的查詢部分（從問號 ? 開始的部分）。

let searchStr = window.location.search;
let params = new URLSearchParams(searchStr);
let id = params.get('id');

五、總結

本文主要介紹了javascript如何獲取不同類型的值，包括從表單輸入框、單選框、複選框和下拉列表中獲取值，以及從URL中取得參數值。無論是什麼類型的值，javascript都提供了相應的方法來獲取它，我們只需根據實際需求選擇合適的方法。在日常開發工作中，了解這些方法將能夠在你的工作中帶來很大的便利性和效率。

以上是javascript怎麼取得值的詳細內容。更多資訊請關注PHP中文網其他相關文章！