3

我有以下复选框，我需要将它们作为数组值获取。

<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" />

我需要将它们作为数组传递给一个 ajax 请求，如下所示：

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

我正在使用这个函数来获取值但不能将它们作为数组传递给函数，像这样传递4,3,1,5.我需要像这样传递它们

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

我这样做如下

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

3 回答 3

3

http://jsfiddle.net/xQezt/

这个小提琴做你想做的吗？序列化是幼稚的，但您可以在其他地方或使用 Zepto、jQuery 或 YUI 之类的框架找到正确的方法来执行该操作。

首先，我找到了一种“提交”数据的方法。输出到控制台，所以打开你的萤火虫。不过可以去任何地方。

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

然后我让你的方法“getContacts”更通用：

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

这是天真的序列化函数。我不希望这在所有情况下都能正常工作，所以你应该做一些研究，从哪里获得一个好的序列化算法：

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

我还稍微修改了您的 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>

这让我可以像这样查询 DOM：

var d=document;
var submitButton = d.getElementById('submit');
var contacts = d.getElementById('contacts');
于 2012-08-03T07:56:42.960 回答
1

您输入的 id 是重复的。所以我建议你使用 name 而不是 id

例如，您的 HTML 将如下所示：

<form id='contactform'>
<input type="checkbox" name="contact[]" value="4" />
<input type="checkbox" name="contact[]" value="3" />
<input type="checkbox" name="contact[]" value="1" />
<input type="checkbox" name="contact[]" value="5" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

然后，如果您想获取查询字符串的值，请使用JQuery Serialize

$('#contactform').serialize(); 
// this will take some thing like this, Example check the second and the fourth
// contact%5B%5D=3&contact%5B%5D=5

jsfiddle：http: //jsfiddle.net/Eqb7f/

于 2012-08-03T08:07:26.667 回答
0 
$(document).ready(function() {
  $("#submit").click(function(){
    var favorite = [];
    $.each($("input[class='check']:checked"), function(){   
      favorite.push($(this).val());
    });
    document.getElementById('fav').value = favorite.join(", ");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cd-form-list">
  <div>
    <input type="checkbox" id="cd-checkbox-2" class="check" value="A">
    <label for="cd-checkbox-1">A for Apple</label>
  </div>
  <div>
    <input type="checkbox" id="cd-checkbox-2" class="check" value="B">
    <label for="cd-checkbox-2">B for Ball</label>
  </div>
  <div>
    <input type="checkbox" id="cd-checkbox-3" class="check" value="C">
    <label for="cd-checkbox-3">C for Cat</label>
  </div>
  <div>
    <input type="checkbox" id="cd-checkbox-4" class="check" value="D">
    <label for="cd-checkbox-4">D for Dog</label>
  </div>
  <div>
    <input type="checkbox" id="cd-checkbox-5" class="check" value="E">
    <label for="cd-checkbox-5">E for Ear</label>
  </div>
  <div>
    <input type="checkbox" id="cd-checkbox-6" class="check" value="F">
    <label for="cd-checkbox-6">F for Fish</label>
  </div>
  <div>
    <input type="checkbox" id="cd-checkbox-7" class="check" value="G">
    <label for="cd-checkbox-7">G for God</label>
  </div>
  <div>
    <input type="checkbox" id="cd-checkbox-8" class="check" value="H">
    <label for="cd-checkbox-8">H for Hen</label>
  </div>
</div>
<div>
  <input type="submit" value="Submit" id="submit">
</div>
<input name="services" id="fav">
于 2019-04-16T06:06:25.033 回答