使用jQuery或純Javascript使用HTML輸入文本框的數組訪問

Question

我正在創建一個包含動態數量的輸入文本框的表單。我希望每個文本框形成一個數組的一部分（這在理論上會讓我更容易循環它們，特別是因爲我不知道最終將存在的文本字段的數量）。 HTML代碼想是這樣的：

<p>Field 1: <input type="text" name="field[1]" id="field[1]"></p> 
<p>Field 2: <input type="text" name="field[2]" id="field[2]"></p> 
<p>Field 3: <input type="text" name="field[3]" id="field[3]"></p> 
<p>Field 4: <input type="text" name="field[4]" id="field[4]"></p> 
<p>Field 5: <input type="text" name="field[5]" id="field[5]"></p> 

然後，這些數據將被髮送到一個PHP腳本，並會被表示爲一個陣列 - 或者至少，這是理論。

所以我的第一個問題是，這是否可以使用HTML？設計的表單是以這種方式工作的嗎？

如果答案是「是」，那麼我該如何去訪問使用jQuery的每個人，或者失敗，這是普通的舊JavaScript？

我已經嘗試此使用下面的jQuery代碼來實現：

someval = $('#field[1]').val(); 

和

someval = $('#field')[1].val(); 

和下面的JavaScript：

someval = document.getElementById('related_link_url')[1].value; 

但我已經沒有運氣好的話。

在此先感謝。

編輯：

我要指出，但從一個Javascript一點，我已經受夠了工作，其中每個元素的ID是一樣的東西field_1，field_2等。不過，我覺得，如果我可以通過將每個文本框放入一個數組來實現它，它會使代碼管理更加整潔。

Answer 1

首先，id屬性不能包含[或]字符。

有很多方法可以讓jQuery /普通JavaScript引用這些元素。您可以使用後代選擇：

<fieldset id="list-of-fields"> 
    <!-- your inputs here --> 
</fieldset> 

$("#list-of-fields input"); 
document.getElementById("list....").getElementsByTagName("input"); 

您還可以使用屬性選擇：

$("input[name^=field]"); 

我不知道這是否是唯一的辦法，但我認爲，在普通的JavaScript你必須全部取input元素（document.getElementsByTagName），然後遍歷這些元素的數組並檢查每個元素（它是否具有name屬性，其值以field開頭）。

Answer 2

給每個元素的類和訪問使用jQuery羣：

<p>Field 1: <input type="text" name="field[1]" class="fields"></p> 
<p>Field 2: <input type="text" name="field[2]" class="fields"></p> 
<!-- etc... --> 

的jQuery：

$("input.fields").each(function (index) 
{ 
    // Your code here 
}); 

這將運行每個input元素的匿名函數與「域」的類名，與this關鍵字指向當前元素。有關更多信息，請參閱http://api.jquery.com/each/。