通过所有的复选框值在Javascript数组 [英] Pass all checkboxes values as an array in Javascript

问题描述

我有下面的复选框，我需要让他们作为数组值。

 ＆LT;输入类型=复选框ID =CONTACT_ID值=4/＆GT;
＆LT;输入类型=复选框ID =CONTACT_ID值=3/＆GT;
＆LT;输入类型=复选框ID =CONTACT_ID值=1/＆GT;
＆LT;输入类型=复选框ID =CONTACT_ID值=5/＆GT;
 

我需要将它们传递给一个Ajax请求的数组如下：

  xmlHttp.open（POST，行动=接触和放大器; CONTACT_ID =+接触，真正的）;
 

我使用这个函数来获取值，但不能将它们传递给函数的数组，所传递的是这样 4,3,1,5。我需要他们传递这样

CONTACT_ID [] = 4和CONTACT_ID [] = 3及CONTACT_ID [] = 1＆安培; CONTACT_ID [] = 5

我已经做到了这一点如下：

 函数getContacts（）{
            VAR接触= document.myform.contact_id，IDS = [];
            对于（VAR I = 0; I＆LT; contacts.length; I + = 1）{
                如果（联系人[I] .checked）
                     ids.push（联系人[I]。价值）;
            }
            返回的ID;
        }
 

解决方案

http://jsfiddle.net/xQezt/

这是否小提琴做你想要什么？序列化是天真的，但你能找到一个合适的方式做其他地方或通过使用类似的Zepto，jQuery的或YUI了一个框架，具体的事情。

首先，我做了一个办法提交的数据。输出到控制台，那么打开你的萤火虫。可以去任何地方，但。

  //提交活动报名
submitButton.onclick =功能（）{
    VAR contactArray = inputsToArray（contacts.children）;
    VAR数据= serializeArray（contactArray，'CONTACT_ID []'）;
    的console.log（数据）;
}
 

然后我做了你的方法getContacts更通用的：

 函数inputsToArray（输入）{
    VAR ARR = [];
    对于（VAR I = 0; I＆LT; inputs.length;我++）{
        如果（输入[I] .checked）
            arr.push（输入[I]。价值）;
    }
    返回ARR;
}
 

下面是幼稚的序列化功能。我不希望这在所有情况下正常工作，所以你应该做一些研究，从哪里获得的好序列化算法中：

 函数serializeArray（数组名称）{
    VAR系列化='';
    对于（VAR I = 0，J = array.length; I＆LT; D​​];我++）{
        如果（ⅰ大于0）序列+ ='＆安培;';
        序列化+ =名称+=+阵列[I]
    }
    返回序列化的;
}
 

我也稍微修改你的HTML：

 ＆LT; D​​IV ID =接触与GT;
＆LT;输入类型=复选框值=4/＆GT;
＆LT;输入类型=复选框值=3/＆GT;
＆LT;输入类型=复选框值=1/＆GT;
＆LT;输入类型=复选框值=5/＆GT;
＆LT; / DIV＆GT;

＆LT;按钮ID =提交＆GT;提交＆LT; /按钮＆GT;
 

这让我查询这样的DOM：

 变种D =文件;
VAR提交按钮= d.getElementById（'提交'）;
VAR接触= d.getElementById（联系人）;
 

I have the below checkboxes and I need to get them as an array values.

<input type="checkbox" id="contact_id" value="4" />
<input type="checkbox" id="contact_id" value="3" />
<input type="checkbox" id="contact_id" value="1" />
<input type="checkbox" id="contact_id" value="5" />

I need to pass them to one ajax request as array as below:

xmlHttp.open("POST","?action=contact&contact_id=" +contacts,true);

I am using this function to get the values but not able to pass them to the function as array, the passed like this 4,3,1,5. I need them to be passed like this

contact_id[]=4&contact_id[]=3&contact_id[]=1&contact_id[]=5

I have done this as follows

function getContacts(){
            var contacts = document.myform.contact_id, ids = [];
            for (var i = 0; i < contacts.length; i += 1){
                if (contacts[i].checked)
                     ids.push(contacts[i].value);
            }
            return ids;
        }

解决方案

http://jsfiddle.net/xQezt/

Does this fiddle do what you want? The serialization is naive, but you could find a proper way to do that exact thing elsewhere or by using a framework like Zepto, jQuery or YUI.

First I made a way to "submit" the data. The output goes to the console, so open your firebug. Could go anywhere, though.

//submit event registration
submitButton.onclick = function () {
    var contactArray = inputsToArray(contacts.children);
    var data = serializeArray(contactArray, 'contact_id[]');
    console.log(data);
}

Then I made your method "getContacts" more generic:

function inputsToArray (inputs) {
    var arr = [];
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked)
            arr.push(inputs[i].value);
    }
    return arr;
}

Here is the naive serialization function. I do not expect this to work well in all cases, so you should do some research in where to get a good serialization algo from:

function serializeArray (array, name) {
    var serialized = '';
    for(var i = 0, j = array.length; i < j; i++) {
        if(i>0) serialized += '&';
        serialized += name + '=' + array[i];
    }
    return serialized;
}

I also slightly modified your HTML:

<div id="contacts">
<input type="checkbox" value="4" />
<input type="checkbox" value="3" />
<input type="checkbox" value="1" />
<input type="checkbox" value="5" />
</div>

<button id="submit">Submit</button>

Which let me query the DOM like this:

var d=document;
var submitButton = d.getElementById('submit');
var contacts = d.getElementById('contacts');

这篇关于通过所有的复选框值在Javascript数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！