和here's the fiddle of it

Question

我已动态加载复选框字段，如何根据用户选择将这些字段发送到服务器。

例如我关注doc，

<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);
}

这是基本设置。如果你愿意，你可以添加支票并进一步定制，这样你就可以处理各种类型的输入字段，但实质上，它可归结为此。
您可能还想在Array.prototype.forEach NodeList上使用myForm.elements，并使用回调来保持代码的良好和清洁。
以下是相同代码稍微更实用的版本的示例：

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]);
         });

它对我有用，建议如果上面的代码片段中有任何不正确的内容。

如何使用jQuery基于用户输入创建javascript数组

4 个答案:

和here's the fiddle of it