jQuery get selected checkbox values in array

Question

I have my markup like this. I want to get the each selected values inside an array. So that I can use them in my php ajax file.

<form id="assign-files">
    <table class="send-request">
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" class="check" name="translation_document_id[]" value="4" >
                </td>
                <td>File 124</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="check" name="translation_document_id[]" value="5" >
                </td>
                <td>File New</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="check" name="translation_document_id[]" value="8" >
                </td>
                <td>New Docs</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="check" name="translation_document_id[]" value="28" >
                </td>
                <td>New Docs here</td>
            </tr>                               
        </tbody>
    </table>
    <button class="assign btn btn-primary pull-right">Assign Files</button>
</form>

My jquery file is like this

<script>
jQuery(document).ready(function($) {
    $('body').on('click', 'button.assign', function() {
        var atLeastOneIsChecked = $('input[name="translation_document_id[]"]:checked').length > 0;
        if( atLeastOneIsChecked == true ) {
            var ids = [];
            var Selected = $(this).parents('form').find('input[type=checkbox]');
            Selected.find(':checkbox:checked').each(function(i) {
                var obj = {};
                obj["id"]=$(this).val();
        });
        console.log(ids);
        }
        if( atLeastOneIsChecked == false ) {
            alert('select at least one checkbox');
        }
    });
});
</script>

Here I don't get the values for the selected checkbox. How to get the selected values like an array?

Zakaria Acharki · Accepted Answer · 2015-09-10 10:36:40Z

2

Working fiddle

This should work :

$('body').on('click', 'button.assign', function() {
    var atLeastOneIsChecked = $('input[name="translation_document_id[]"]:checked');
    if( atLeastOneIsChecked.length ) {
        var ids = [];
        var Selected = $(this).parents('form').find('input[name="translation_document_id[]"]:checked');
        Selected.each(function(pos,element) {
            ids.push($(this).val());
        });
        console.log(ids);
    } else {
        alert('select at least one checkbox');
    }
});

edited Sep 10, 2015 at 10:36

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

answered Sep 10, 2015 at 10:32

Cerlin

6,7321 gold badge23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2015-09-10 10:30:14Z

1

Your selector is not correct.
You are not adding object to array.

Code

var ids = [];
var form = $(this).parents('form'); 
form.find(':checkbox:checked').each(function(i) {
    var obj = {};
    obj["id"] = $(this).val();

    //Push to array
    ids.push(obj)
});

Alternatively, .map() can be used

var ids = $(this).parents('form').find('input[type=checkbox]:checked').map(function() {
    return {
        id: $(this).val()
    }
}).get();

answered Sep 10, 2015 at 10:30

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Milind Anantwar · Accepted Answer · 2015-09-10 10:36:24Z

0

Let us have a look at these two lines in your code:

 var Selected = $(this).parents('form').find('input[type=checkbox]');
 Selected.find(':checkbox:checked').each(function(i) {

The code is finding checkbox checked element in selector. which do not exist. You should rather use filter instead of find here. also using .map() is cleaner way to get the collection of info associated with object:

var Selected = $(this).parents('form').find(':checkbox:checked');
var selectedids = Selected.map(function(i) {
   return $(this).val();
}).get();

edited Sep 10, 2015 at 10:36

answered Sep 10, 2015 at 10:30

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

1 Comment

Milind Anantwar Over a year ago

@NewUser: check the updated answer. needed val instead of id

Collectives™ on Stack Overflow

jQuery get selected checkbox values in array

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related