如何使用jQuery根據用戶輸入創建javascript數組

Question

我已經動態加載複選框字段，我如何根據用戶選擇將它們發送到服務器。

比如我下面的文檔，

<label>Set1</label> 
<input type="checkbox" name="set_199[]" value="Apple" /> 
<input type="checkbox" name="set_199[]" value="Mango" /> 
<input type="checkbox" name="set_199[]" value="Grape" /> 

<label>Set2</label> 
<input type="checkbox" name="set_200[]" value="Red" /> 
<input type="checkbox" name="set_200[]" value="Blue" /> 
<input type="checkbox" name="set_200[]" value="Orange" /> 

如果用戶選擇的前兩個值爲他們每個人的假設，那麼我就需要發送類似

response[0][0]=199; // Id 
response[0][1]=['Apple','Mango']; //values 
response[1][0]=200 
response[1][1]=['Red','Blue']; 

我已經嘗試了一些方法建議在現有的職位，但未能實現我的想法。

Answer 1

您可以在HTML中一些細微的變化，然後用.map()

<label class="set" data-id="199">Set1</label> 
<input type="checkbox" name="set_199[]" value="Apple" /> 
<input type="checkbox" name="set_199[]" value="Mango" /> 
<input type="checkbox" name="set_199[]" value="Grape" /> 
<label class="set" data-id="200">Set2</label> 
<input type="checkbox" name="set_200[]" value="Red" /> 
<input type="checkbox" name="set_200[]" value="Blue" /> 
<input type="checkbox" name="set_200[]" value="Orange" /> 

然後

var array = $('.set').map(function() { 
    var $this = $(this), 
     id = $this.data('id'), 
     array = [id]; 

    array.push($('input[name="set_' + id + '\\[\\]"]').filter(':checked').map(function() { 
     return this.value; 
    }).get()) 
    return [array] 
}).get() 

演示：Fiddle

Answer 2

又一解決方案：

<lable>Set1</lable> 
<input type="checkbox" name="set_199[]" value="Apple" /> 
<input type="checkbox" name="set_199[]" value="Mango" /> 
<input type="checkbox" name="set_199[]" value="Grape" /> 

<input type="button" value="check" class="js-submit"> 

個

JS：

$(".js-submit").on("click", function(){ 
    var a = $("input[type='checkbox']:checked"); 
    var values = {}; 
    a.each(function(){ 
     var value = $(this).val(); 
     var name = $(this).attr("name"); 
     if(!values[name]) values[name] = []; 
     values[name].push(value) 
    }); 
    console.log(values) 
}); 

Demo

Answer 3

爲了擴大對我的評論了一下，這裏就是我會做這個......因爲你可以發送此作爲一個Ajax請求，我還是包裹在一個表單元素這些元素，並使用它作爲一個出發點，以構建我們將發送對象...

var myForm = document.getElementById('formID').elements,//get all input nodes 
data = {},temp; 
for (var i=0;i<myForm.length;++i) 
{ 
    temp = myForm.item(i).name.replace(/[[]]/g,'');//replace square brackets 
    if (!data[temp]) 
     data[temp] = [];//create array if key does not exist 
    if (myForm.item(i).checked)//for checkboxes 
     data[temp].push(myForm.item(i).value); 
} 

這是基本的設置。如果你願意，你可以添加檢查並進一步調整它，這樣你可以處理各種類型的輸入字段，但實質上，它可以歸結爲此。
您可能還想在myForm.elements NodeList上使用Array.prototype.forEach，並使用回調使代碼保持乾淨。
下面是相同的代碼稍微更可用版本的例子：誰給了這個問題的答案都感謝所有的

btn.addEventListener('click', function() 
{ 
    var data = {}; 
    Array.prototype.forEach.call(frm.elements, function(item) 
    { 
     var temp; 
     if (item === btn) return;//don't includ the button element 
     if (item.type === 'checkbox' && !item.checked) return;//not checked, ignore 
     if (item.name.match(/[[]]/)) 
     { 
      temp = item.name.replace(/[[]]/g, ''); 
      if (!data[temp]) data[temp] = [];//if property does not exist, make an array 
      data[temp].push(item.value); 
      return; 
     } 
     //normal elements: 
     data[item.name] = item.value; 
    }); 
    //ajax request using data variable goes here! 
    console.log(data); 
},false); 

而here's the fiddle of it

Answer 4

第一。我得出我自己對這個問題的解決方案，但它是不可能沒有你的幫助，尤其是this

 var checkBoxArray = {}; 

     $.each($("input[name^='set_'][type='checkbox']:checked"), function(i, item) { 

      var Id = item.name.replace(/^(set_)|[\[\]]/g, ""); 
      var value = $(item).val();   

      if(!checkBoxArray[Id]) 
       checkBoxArray[Id] = []; 
      checkBoxArray[Id].push(value) 
     });       

     $.map(checkBoxArray, function(value, index) { 
      reponse.push([index, value]); 
     }); 

它的工作對我來說，建議如果有什麼在上面的代碼片斷不妥當的。