find selected checkboxes with jQuery

Question

I have this structure:

<div id="fields" class="grid">
    <div>...<div>
    <div id="some_id_1" class="itemSortable">
        <input ...>
        <input ...>
        <div>
            <input id="selected" name="selected" type="checkbox" value="true">
            <input name="selected" type="hidden" value="false">
            ...
        </div>
    <div id="some_id_2" class="itemSortable">
        <input ...>
        <input ...>
        <div>
            <input id="selected" name="selected" type="checkbox" value="true">
            <input name="selected" type="hidden" value="false">
            ...
        </div>
     ...
    <div id="some_id_n" class="itemSortable">
        <input ...>
        <input ...>
        <div>
            <input id="selected" name="selected" type="checkbox" value="true">
            <input name="selected" type="hidden" value="false">
            ...
        </div>
</div>

I have no experience with jQuery so I am stuck. Can somebody help with jQuery script to get an array of all ids (Eg. some_id_x) for selected checkboxes?

`$(".grid .input[type='checkbox']:checked")` will return all of the selected checkbox elements. — Olly Hodgson, Dec 18 '12 at 13:54
I think this should answer your question! http://stackoverflow.com/questions/590018/getting-all-selected-checkboxes-in-an-array — HappyHacking, Dec 18 '12 at 13:55
None of the checkboxes in your code are in fact checked / selected, so the answer is always `[]` :) — Ja͢ck, Dec 18 '12 at 13:57
Thanks everyone! Sorry I cannot vote up for all useful answers here :) — user1734523, Dec 18 '12 at 14:10

score 2 · Answer 1 · answered Dec 18 '12 at 13:56

2

To get an array of the ids of the closest parent .itemSortable of the selected checkboxes, try this:

var idArray = $('#fields').find(':checked').map(function() {
    return $(this).closest('.itemSortable').prop('id');
}).get();

You seem to have a lot of duplicate id attributes though which means your HTML is invalid and will lead to problems in your code.

answered Dec 18 '12 at 13:56

Rory McCrossan

331,213
40
305
339

1

I think he wants to know the parent element's ID, so return `$(this).parents("div.itemSortable").attr("id");` should do the trick. – Olly Hodgson Dec 18 '12 at 13:57

score 1 · Accepted Answer · answered Dec 18 '12 at 14:00

First you get the checkboxes themselves:

$(':input:checked');

Then you find their respective parents:

$(':input:checked').parents('.itemSortable');

To get each id, use .each() to iterate over the resulting list:

var ids = [];
$(':input:checked').parents('.itemSortable').each(function() {
    ids.push(this.id);
});

score 0 · Answer 3 · answered Dec 18 '12 at 13:55

0

css id's are meant to only be on 1 element on a page, use classes.

$('.someClass:checked').serialize()

answered Dec 18 '12 at 13:55

Adam Merrifield

10,307
4
41
58

score 0 · Answer 4 · answered Dec 18 '12 at 13:56

0

use :checked Selector

Details on http://api.jquery.com/selected-selector/

Example:

$(function()
{
    var idArray = new Array(); $('#fields').find(':checked').each(function() 
   {
       idArray.push(this.id);
   });

   console.log(idArray);
});

answered Dec 18 '12 at 13:56

GajendraSinghParihar

9,051
11
36
64

Mr.H · Answer 5 · 2012-12-18T14:25:06.350

in order to retrieve the checked inputs of type check (check-boxes), use the ":checked" selector. this example can explain my point:

Html:

<div id="fields" class="grid">
        <div id="some_id_1" class="itemSortable">
            <div>
                <input id="selected" name="selected" type="checkbox" value="true" checked="checked"/>
            </div>
        </div>
        <div id="some_id_2" class="itemSortable">
            <div>
                <input id="selected" name="selected" type="checkbox" value="true" checked="checked"/>
            </div>
         </div>
        <div id="some_id_n" class="itemSortable">
            <div>
                <input id="selected" name="selected" type="checkbox" value="true"/>
            </div>
        </div>
    </div>

javascript/JQuery:

$(document).ready(function () {
            alert($("#fields :checked").length);
        });

this example will alert number two; the count of checked check-boxes in element with id "fields" .

PS:

I hope this is what you have requested.
to make input of type checkbox is checked use the attribute checked="checked"

find selected checkboxes with jQuery

5 Answers5