在前端開發中，為了可以處理使用者輸入的數據，通常需要取得表單元素的輸入值。 JavaScript提供了一些方法來取得輸入值，讓我們一起來看看吧。
一、取得文字方塊的輸入值
文字方塊是最常見的表單元素之一，在取得其輸入值時，可以使用value屬性。我們可以透過getElementById方法來取得文字方塊元素，然後使用value屬性來取得輸入的值。
範例程式碼：
<input type="text" id="myText">
<script>
var inputVal = document.getElementById("myText").value;
console.log(inputVal);
</script>在上面的程式碼中，我們先定義了一個文字方塊元素，然後使用JavaScript取得其輸入值，最後將值輸出到控制台中。
二、取得多重選取框的輸入值
多重選取框通常用於選擇一個或多個選項，我們可以透過循環遍歷所有選擇項來取得其輸入值。我們首先需要取得多選框的所有選項，然後遍歷所有選項，透過checked屬性來取得選項的狀態。
範例程式碼：
<input type="checkbox" class="checkbox" value="apple">
<input type="checkbox" class="checkbox" value="orange">
<input type="checkbox" class="checkbox" value="banana">
<script>
var checkboxes = document.getElementsByClassName("checkbox");
var checkedVal = [];
for(var i = 0; i < checkboxes.length; i++){
if(checkboxes[i].checked){
checkedVal.push(checkboxes[i].value);
}
}
console.log(checkedVal);
</script>在上面的程式碼中，我們先定義了幾個多選框元素，並透過getElementsByClassName方法取得了全部的多重選取框元素。然後，我們透過遍歷的方式取得每個選項的狀態，並將選取的選項值儲存在一個陣列中。
三、取得單選框的輸入值
取得單選框的輸入值和多選框類似，也是需要遍歷單選框元素，取得選項狀態。但不同的是，由於單選框每次只能選擇一個選項，我們通常可以使用name屬性將單選框元素分組，這樣可以更方便地遍歷所有的選項。
範例程式碼：
<input type="radio" name="fruit" value="apple">
<input type="radio" name="fruit" value="orange">
<input type="radio" name="fruit" value="banana">
<script>
var radios = document.getElementsByName("fruit");
var checkedVal = null;
for(var i = 0; i < radios.length; i++){
if(radios[i].checked){
checkedVal = radios[i].value;
break;
}
}
console.log(checkedVal);
</script>在上面的程式碼中，我們首先定義了幾個單選框元素，並透過name屬性將它們進行分組。然後，我們透過遍歷的方式取得目前選擇項目的狀態，如果選項被選中，我們就將它的值儲存在checkedVal變數中。
總結：
以上就是取得表單元素的輸入值的方法，文字方塊、多重選取方塊和單一選取方塊的取得方法有所不同，但都是透過遍歷元素然後透過特定的屬性來取得輸入值。無論何種方法，取得表單元素的輸入值都是處理使用者輸入資料的必要步驟。
以上是javascript怎麼取得輸入值的詳細內容。更多資訊請關注PHP中文網其他相關文章！
