Can I pass multiple checkbox values with one name?

javascript, jquery, twitter-bootstrap

Solution

Something like this would do the trick:

<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

Edit: This is basically exactly what Chase described in his answer.

Problem

I'm using Twitter's bootstrap and need to pass a delimited list of checkbox selections to my server for processing. The checkbox HTML looks like this: ``` <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(){ ... }); ``` I'm passing the form values as a serialized string using jquery but the values are being sent like so: ``` my_match=190&my_match=200 ``` Is it possible to send them in the following format? ``` my_match=190:200 ``` I'm not sure if I need to change my HTML or this is something I need to handle with javascript. Any thoughts?

Original source