Javascript 我可以用一个名称传递多个复选框值吗？

我正在使用Twitter的引导，需要将复选框选择的分隔列表传递给我的服务器进行处理。复选框HTML如下所示：

<div class="controls">
    <label class="checkbox"><input type="checkbox" name="my_match[]" value="190">TEST 190</label>
    <label class="checkbox"><input type="checkbox" name="my_match[]" value="200">TEST 200</label>
    <label class="checkbox"><input type="checkbox" name="my_match[]" value="210">TEST 210</label>
</div>

...

$.post("form.php", $("#form_id").serialize(), function(){
    ...
});

是否可以按以下格式发送

my_match=190:200

---

我不确定是否需要更改我的HTML，或者这是我需要用javascript处理的事情。有什么想法吗？

我相信同名的复选框会返回一个逗号分隔的列表。你可以做的是创建一个隐藏字段，按你想要的方式附加你的复选框值，然后发送隐藏字段。

类似的方法可以做到：

<div class='controls'>
    <label class="checkbox">
        <input type="checkbox" name="my_match[]" value="190">TEST 190</label>
    <label class="checkbox">
        <input type="checkbox" name="my_match[]" value="200">TEST 200</label>
    <label class="checkbox">
        <input type="checkbox" name="my_match[]" value="210">TEST 210</label>
</div>

<form>
    <input id='my_match' type='hidden' name='my_match[]' />
    <button>Submit</button>
</form>

​

---

---

编辑：这基本上正是蔡斯在回答中所描述的。

对于任何被谷歌带到这里的人：

据我所知，JavaScript是将它们变成带分隔符的字符串的唯一方法，因为如果您想要一个通用解决方案，该解决方案可以处理所有可能需要的分隔符，并且支持在某个值字符串中显示分隔符时转义分隔符，那么它会变得复杂

如果可能的话，我强烈建议只接受

my_match=190&my_match=200

格式并在服务器上进行转换

在PHP中，如果将

[]

放在名称的末尾，则这是自动的。在其他语言中，比如Python，通常会有一个特殊的getter，它返回一个列表而不是一个值。（例如，Django中的

request.POST.getlist（'my_match'）

）

依赖JavaScript会使您的页面更加脆弱，因为脆弱的连接、网络故障或损坏的应用程序层防火墙可能会阻止JavaScript加载或延迟足够长的时间，以便用户尝试在没有JavaScript的情况下单击Submit

（而且，如果在加载JavaScript之前禁用“提交”按钮，只会让访问者感到恼火和/或沮丧，并给他们留下这样的印象：你的网站建设得很糟糕，因为其他人在没有该限制的情况下都做得很好。请始终记住你的行为会如何影响你的第一印象。）

…更不用说，在不需要严格使用JavaScript的情况下依赖JavaScript（例如，没有

：hover

回退的下拉菜单，轻率地要求JavaScript提交的表单，等等）会让像我这样使用JavaScript白名单工具（如NoScript）来：

减少网络广告和“接受调查！”间隙广告的烦人

减少打开大量卡舌和扩展卡舌时的惰性

限制0天攻击成功的机会

---

如果您在这种情况下绝对必须使用JavaScript，请务必使用

标记警告人们在填写表单之前重新加载启用了JavaScript的内容。

这一点和隐藏字段的组合起到了作用。谢谢这对我不起作用。我有相同名称和不同值的复选框。

<div class='controls'>
    <label class="checkbox">
        <input type="checkbox" name="my_match[]" value="190">TEST 190</label>
    <label class="checkbox">
        <input type="checkbox" name="my_match[]" value="200">TEST 200</label>
    <label class="checkbox">
        <input type="checkbox" name="my_match[]" value="210">TEST 210</label>
</div>

<form>
    <input id='my_match' type='hidden' name='my_match[]' />
    <button>Submit</button>
</form>

$('form').submit(function() {
    var arr=[];

    $('input:checked[name=my_match[]]').each(function(){
        arr.push($(this).val());
    });

    $('#my_match').val(arr.join(':'));
    alert($('#my_match').val());

    // Prevent actual submit for demo purposes:
    return false;
});
​
​