如何通過JavaScript函數獲取輸入數組值？

Question

這裏是示例代碼我嘗試創建輸入數組與鍵和更改我想要獲取單個輸入數組值的值。

<input type="text" name="items[1]" value="443" onchange="get_items(1)"> 
<input type="text" name="items[2]" value="233" onchange="get_items(2)"> 
<script> 
     function get_items(key) 
     { 
      alert($("items["+key+"]").val()); 
     } 

</script> 

Answer 1

只需將this上下文作爲參數並獲取值即可。

<input type="text" name="items[1]" value="443" onchange="get_items(this)"> 
 
<input type="text" name="items[2]" value="233" onchange="get_items(this)"> 
 
<script> 
 
    function get_items(ele) { 
 
    alert(ele.value); 
 
    } 
 
</script>

Answer 2

• 你的HTML缺少的name屬性的收盤報價。
• name屬性不應包含[或] 個字符。添加這些字符會使問題複雜化。
• 你應該用JavaScript代替你的事件處理程序，而不是HTML。
• 當實用，元素應該加入到他們獨特id屬性，這將使訪問，並確定它們在JavaScript中更容易和CSS

而不是試圖找出與索引的文本框，就聚集起來，並將它們放入一個數組或類似數組的容器中，其中索引將自動分配給它們。

下面是如何通過指數來獲得值的工作例如：

// This will scan the DOM and place all matched elements into a node list 
 
// which is an array-like object 
 
var textBoxes = document.querySelectorAll("input[type=text]"); 
 

 
// Or, you can get references to them individually: 
 
var txt1 = document.getElementById("txt1"); 
 
var txt2 = document.getElementById("txt2"); 
 

 
// And, put them into an array on your own: 
 
var ary = [txt1, txt2]; 
 

 
// No matter how you got your references to them, it's best to hook 
 
// them up to event handler in JavaScript, not HTML 
 
txt1.addEventListener("change", get_items2); 
 
txt2.addEventListener("change", get_items2); 
 

 
function get_items(key) { 
 
    // You can certainly pass a key to this function 
 
    // to identify which element you are talking about 
 
    alert(textBoxes[key].value); 
 
    
 
} 
 

 
function get_items2(evt) { 
 
    // But, event handlers are automatically passed 
 
    // a reference to the object that fired the event 
 
    alert(evt.target.value); 
 
    
 
} 
 

 
get_items(0); // Call the function to get first textbox value 
 
get_items(1); // Call the function to get second textbox value

<input type="text" id="txt1" name="txt1" value="443"> 
 
<input type="text" id="txt2" name="txt2" value="233">

Answer 3

參考fiddle

HTML：

<input type="text" name="items[1]" value="443" onchange="get_items(1)"> 
<input type="text" name="items[2]" value="233" onchange="get_items(2)"> 

個

JS：

function get_items(key) 
     { 
      alert($('input[name="items['+key+']"]').val()); 
     } 

Answer 4

你可以從event事件的目標，

function get_items(e) { 
 
    console.log(e.target.value); 
 
}

<input type="text" name="items[1]" value="443" onchange="get_items(event)"> 
 
<input type="text" name="items[2]" value="233" onchange="get_items(event)">

，或者更好，附上你的聽衆在javascript：

function get_items(e) { 
 
    console.log(e.target.value); 
 
}; 
 

 
var inputs = document.querySelectorAll("input"); 
 

 
for (var i = 0, el; i < inputs.length; i += 1) { 
 
    el = inputs[i] 
 
    el.addEventListener("change", get_items); 
 
};

<input type="text" name="items[1]" value="443"> 
 
<input type="text" name="items[2]" value="233">

Answer 5

下面是一些代碼，做什麼（我覺得）你正在嘗試做的：

<input type="text" name="item1" value="443" onchange="javascript:get_items(1)"> 
<input type="text" name="item2" value="233" onchange="javascript:get_items(2)"> 
<script> 
    function get_items(key) 
    { 
     //alert($("items["+key+"]").val()); 
     var input = $('input[name="item' + key + '"]'); 
     var value = input.val(); 
     alert(value); 
    } 
</script> 

的jsfiddle：https://jsfiddle.net/9kvv2q7p/4/

Answer 6

您可以使用此

function get_items(key) { 
    alert($("input[name='items[" + key + "]']").val()); 
} 

我希望我有幫助