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

时间:2012-05-12 01:30:46

标签: javascript jquery twitter-bootstrap

我正在使用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(){
    ...
});

我使用jquery将表单值作为序列化字符串传递,但值的发送方式如下:

my_match=190&my_match=200

是否可以按以下格式发送?

my_match=190:200

我不确定是否需要更改HTML或者这是我需要使用javascript处理的内容。有什么想法吗?

3 个答案:

答案 0 :(得分:12)

这样的事情可以解决问题:

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

Try out the fiddle


编辑:这基本上就是蔡斯在答案中描述的内容。

答案 1 :(得分:4)

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

答案 2 :(得分:0)

对于被Google带到这里的任何人:

据我所知,JavaScript是使它们成为带分隔符的字符串的唯一方法,因为如果你想要一个可以处理所有可能的所需分隔符的通用解决方案并且如果它出现就支持转义分隔符,它会变得复杂在其中一个值字符串中。

如果可能的话,我强烈建议您只接受my_match=190&my_match=200格式并在服务器上进行转换。

在PHP中,如果将[]放在名称的末尾,那就是自动的。在其他语言中,例如Python,通常会有一个特殊的getter,它返回一个列表而不是一个值。 (例如,Django中的request.POST.getlist('my_match')

依赖JavaScript会使您的页面更加脆弱,因为片状连接,网络打嗝或破坏的应用程序层防火墙可能会阻止JavaScript加载或延迟它,以便用户尝试在没有它的情况下单击“提交”。

(并且,如果您在JavaScript加载之前禁用了提交按钮,那么您只会骚扰和/或挫败您的访问者,并给他们一个印象,即您的网站建设得很糟糕,因为其他人都没有这个限制。请始终牢记您的操作如何影响您的第一印象。)

...更不用说,取决于你不需要的JavaScript(例如没有:hover后备的下拉菜单,轻率需要JavaScript提交的表单等)会让像我这样的人感到烦恼谁使用像NoScript这样的JavaScript白名单工具:

  1. 制作网络广告并“进行调查!”插页式广告不那么讨厌
  2. 减少打开大量标签和扩展程序的迟缓
  3. 限制0天漏洞利用成功的可能性
  4. 如果您绝对必须在这种情况下使用JavaScript,请务必使用<noscript>标记来警告人们在之前使用启用JavaScript的重新加载填写表格。