Question

I have several checkboxes and a fake submit button to make an AJAX request:

<form>
    <input type="checkbox" value="1"/>
    <input type="checkbox" value="2" checked="checked"/>
    <input type="checkbox" value="3"/>
    <input type="checkbox" value="4" checked="checked"/>
    <input type="button" onclick="return mmSubmit();"/>
</form>

Within the mmSubmit() method, I would like to retrieve an array of values that have been selected. Here is what I am currently doing.

mmSubmit = function() {
    var ids = [];
    $('input[type=checkbox]:checked');.each(function(index) {
        ids.push($(this).attr('value'));
    });
    // ids now equals [ 2 , 4 ] based upon the checkbox values in the HTML above
    return false;
};

I’m wondering if there is a shorthand method in jQuery used to retrieve the values into an array, or if what I have is already optimal.

Answer 1

I think this can be accomplished with map. Try the following..

mmSubmit = function() {
    var ids = $('input[type=checkbox]:checked').map(function(){
       return $(this).val();
    }).get();
    // ids now equals [ 2 , 4 ] based upon the checkbox values in the HTML above
    return false;
};

Take a look at: jQuery Traversing/Map