JavaScript作為一種客戶(hù)端腳本語(yǔ)言，無(wú)疑是現(xiàn)代Web開(kāi)發(fā)中的必不可少的一部分。在Web開(kāi)發(fā)中，經(jīng)常需要使用多個(gè)輸入框讓用戶(hù)填寫(xiě)信息，如登錄頁(yè)面、注冊(cè)頁(yè)面、數(shù)據(jù)錄入頁(yè)面等。
JavaScript可以很方便地通過(guò)文檔對(duì)象模型（DOM）控制多個(gè)輸入框的屬性和事件，達(dá)到一定的交互效果。下面我們來(lái)看一個(gè)簡(jiǎn)單的例子：
<!DOCTYPE html>
<html>
<head>
<title>輸入框交互效果</title>
</head>
<body>
<input type="text" id="input1"><br />
<input type="text" id="input2"><br />
<input type="button" value="相加" onclick="add()">
<p>結(jié)果：<span id="result"></span></p>
<script>
function add() {
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var result = document.getElementById("result");
var num1 = parseFloat(input1.value);
var num2 = parseFloat(input2.value);
result.innerHTML = num1 + num2;
}
</script>
</body>
</html>上面的例子演示了兩個(gè)輸入框的數(shù)字相加，并在頁(yè)面上顯示結(jié)果。其中，用戶(hù)輸入的數(shù)據(jù)通過(guò)id屬性指定的元素獲取，利用parseFloat()方法將字符串轉(zhuǎn)換為浮點(diǎn)數(shù)，再將結(jié)果顯示在另一個(gè)元素上。這個(gè)例子只是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)，可以通過(guò)DOM的各種方法實(shí)現(xiàn)更復(fù)雜的輸入框交互效果。
除了常見(jiàn)的文本輸入框之外，還有許多其他類(lèi)型的輸入框，比如單選按鈕、復(fù)選框、下拉列表等。這些輸入框同樣可以使用JavaScript實(shí)現(xiàn)交互效果。下面我們以單選按鈕和復(fù)選框?yàn)槔?/p>
單選按鈕
單選按鈕可以用于從多個(gè)選項(xiàng)中選擇一個(gè)選項(xiàng)。通過(guò)給每個(gè)單選按鈕指定相同的name屬性，可以實(shí)現(xiàn)一個(gè)組件的效果，JavaScript可以獲取選中的單選按鈕的值。
<!DOCTYPE html>
<html>
<head>
<title>單選按鈕交互效果</title>
</head>
<body>
<p>選擇你最喜歡的編程語(yǔ)言：</p>
<input type="radio" name="language" value="JavaScript">JavaScript<br />
<input type="radio" name="language" value="Java">Java<br />
<input type="radio" name="language" value="Python">Python
<p id="result"></p>
<script>
var radios = document.getElementsByName("language");
for (var i = 0; i < radios.length; i++) {
radios[i].onclick = function() {
document.getElementById("result").innerHTML = "你選擇的是：" + this.value;
}
</script>
</body>
</html>上面的例子演示了選擇編程語(yǔ)言的單選按鈕，并在頁(yè)面上顯示選擇結(jié)果。其中，通過(guò)getElementsByName()方法獲取指定名稱(chēng)的所有單選按鈕，利用循環(huán)為每個(gè)單選按鈕添加onclick事件，當(dāng)用戶(hù)點(diǎn)擊單選按鈕時(shí)，JavaScript會(huì)獲取用戶(hù)選擇的值，并將結(jié)果顯示在頁(yè)面上。
復(fù)選框
復(fù)選框可以用于從多個(gè)選項(xiàng)中選擇多個(gè)選項(xiàng)。與單選按鈕類(lèi)似，復(fù)選框也可以指定相同的name屬性，并通過(guò)JavaScript獲取選中的復(fù)選框的值。
<!DOCTYPE html>
<html>
<head>
<title>復(fù)選框交互效果</title>
</head>
<body>
<p>請(qǐng)選擇你喜歡的編程語(yǔ)言：</p>
<input type="checkbox" name="language" value="JavaScript">JavaScript<br />
<input type="checkbox" name="language" value="Java">Java<br />
<input type="checkbox" name="language" value="Python">Python
<p id="result"></p>
<script>
var checkboxes = document.getElementsByName("language");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].onclick = function() {
var result = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
result.push(checkboxes[i].value);
}
}
document.getElementById("result").innerHTML = "你選擇的是：" + result.join(',');
}
}
</script>
</body>
</html>上面的例子演示了選擇編程語(yǔ)言的復(fù)選框，并在頁(yè)面上顯示選擇結(jié)果。與單選按鈕的實(shí)現(xiàn)類(lèi)似，通過(guò)getElementsByName()方法獲取指定名稱(chēng)的所有復(fù)選框，利用循環(huán)為每個(gè)復(fù)選框添加onclick事件，當(dāng)用戶(hù)點(diǎn)擊復(fù)選框時(shí)，JavaScript會(huì)獲取用戶(hù)選擇的值，并將結(jié)果顯示在頁(yè)面上。
綜上所述，JavaScript可以很方便地控制多個(gè)輸入框的交互效果，從而提高Web頁(yè)面的交互性和用戶(hù)體驗(yàn)。在實(shí)際開(kāi)發(fā)中，可以根據(jù)業(yè)務(wù)需求使用DOM的各種方法對(duì)輸入框進(jìn)行定制化的控制。