如何獲取同名多個文本？

Question

當每個複選框檢查複選框時jquery創建輸入 我怎樣才能得到所有名稱輸入？

如果選中複選框創建輸入：

<script> 
function dynInput(cbox) { 
    if (cbox.checked) { 
     var input = document.createElement("input"); 
     input.type = "text"; 
     input.className = "cbox"; 
     var div = document.createElement("div"); 
     div.className = "cbox-div"; 
     div.id = cbox.name; 
     div.innerHTML =cbox.name; 

     div.appendChild(input); 
     document.getElementById("insertinputs").appendChild(div); 
    } else { 
     document.getElementById(cbox.name).remove(); 
    } 
}</script> 

複選框，然後輸入：

 <form class="add-item"> 
      <input type="checkbox" onclick="dynInput(this);" name="1"> 1<br> 
      <input type="checkbox" onclick="dynInput(this);" name="2"> 2<br> 
      <input type="checkbox" onclick="dynInput(this);" name="3"> 3<br> 
      <input type="checkbox" onclick="dynInput(this);" name="4"> 4<br> 
     </form> 
     <p id="insertinputs"></p> 

我只能得到第一個輸入值：

var item = $(".cbox").val(); 

    console.log(item); 

Answer 1

您需要遍歷所有的輸入如：

$(".cbox").each(function(){ 
    var item = $(this).val(); 
    console.log(item); 
}); 

Answer 2

var item=[]; 
$(".cbox").each(function(){ 
item.push($(this).val()); 
}); 

Answer 3

因爲documentation指定val（），它只返回集合中的第一個項目。您需要遍歷集合並讀取每個項目的值。

所以你需要遍歷集合並建立列表。你可以用每（）或地圖（）

var vals1 = []; 
 
$('[type="checkbox"]').each(function() { 
 
    vals1.push(this.value); 
 
}); 
 

 
var vals2 = $('[type="checkbox"]').map(function() { 
 
    return this.value; 
 
}).get(); 
 

 
console.log("vals1", vals1.join(",")) 
 
console.log("vals2", vals2.join(","))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" value="a"> 1<br> 
 
<input type="checkbox" value="b"> 2<br>

Answer 4

var items = document.querySelectorAll('.cbox'); 

var values = []; 

items.forEach(function(item) { 
    values.push(item.value); 
}); 

console.log(values);