如何獲取輸入數組的值

Question

**我想獲得輸入的價值**

 <input class="text-left" readonly id = "editable_text" name = "editable_text[<?php echo $order['id']; ?>]" style="vertical-align: middle" value="<?PHP echo $order['issued_to']; ?>">
 <input  type="checkbox" class="checkbox" name="orders[]" id ="orders"  value="<?php echo $order['id']; ?>" onclick="uncheckMain_arayish()">

    var x = document.getElementsByName("orders[]");
    var text = document.getElementsByName("editable_text[]");
     for (var i = 0; i < x.length; i++) {
                    if (x[i].checked) {
                        var order = x[i].value;
                        text[order].readOnly = false;
                    }
                    else{
                        text[i].readOnly = true;
                    }
                }   

“文本”無法正常工作。

Answer 1

document.getElementById("editable_text").value

https://www.w3schools.com/jsref/prop_text_value.asp

Answer 2

您從var text = document.getElementsByName("editable_text[]");得到一個數組然后您嘗試根據 order.id 訪問order.id

這僅適用於非常特定的情況。

您應該根據訂單 ID 為文本生成唯一 ID

<input class="text-left" readonly id = "editable_text[<?php echo $order['id']; ?>]" name = "editable_text[<?php echo $order['id']; ?>]" style="vertical-align: middle" value="<?PHP echo $order['issued_to']; ?>">

然后你可以在你的 for 中使用document.getElementById來獲取相關的文本元素。

Answer 3

這里的問題是您正在嘗試獲取所有text元素，例如：

var text = document.getElementsByName("editable_text[]");

但是屬性的name並不完全像editable_text[]而是更像editable_text[12]或editable_text[67]等等。 因此，您可以獲得所有這些text元素，例如：

var text = document.querySelectorAll("input[name^='editable_text']");

演示：

 var text = document.querySelectorAll("input[name^='editable_text']"); text.forEach(function(el) { console.log(el.name, el.value) // use this for debugging purpose })

 <input class="text-left" readonly name="editable_text[10]" value="1"> <input class="text-left" readonly name="editable_text[12]" value="2"> <input class="text-left" readonly name="editable_text[14]" value="3"> <input class="text-left" readonly name="editable_text[16]" value="4">

---

此外，使用text[order].readOnly = false; 不起作用，因為text是一個 DOM 元素，我們不能簡單地這樣稱呼它。 您可以改為使用：

document.querySelector("[name='editable_text[" + order + "]']").readOnly = false;

演示：

 var text = document.querySelectorAll("input[name^='editable_text']"); var order = 12; text.forEach(function(el) { // Disable only the name="editable_text[12]" input like document.querySelector("[name='editable_text[" + order + "]']").disabled = true; })

 <input class="text-left" readonly name="editable_text[10]" value="1"> <input class="text-left" readonly name="editable_text[12]" value="2"> <input class="text-left" readonly name="editable_text[14]" value="3"> <input class="text-left" readonly name="editable_text[16]" value="4">