Iterate through the list and get checked checkbox id in jquery

Question

I have got id's of all the row which have check box in a variable.

var allIds = jQuery("#progAccessSearchResults").jqGrid("getDataIDs");

Now I have to iterate over this and get id's of only checked check boxes. I tried following code to get checked checkbox id.

var boxes = $(":checkbox:checked");

But it is not working. Help me out..!! I am new to javascript n jquery. So pls don't mind if it is a silly problem..!!

score 15 · Answer 1 · answered Sep 23 '13 at 09:03

15

You can use .map to find all IDs of checked checkboxes, using your existing selector:

HTML:

<input type="checkbox" id="cb1" />
<input type="checkbox" id="cb2" />
<input type="checkbox" id="cb3" checked="checked" />
<input type="checkbox" id="cb4" />
<input type="checkbox" id="cb5" checked="checked" />

Javascript:

var checkedIds = $(":checkbox:checked").map(function() {
        return this.id;
    }).get();

Returns: [ "cb3", "cb5" ]

Here is a fiddle for the above code.

answered Sep 23 '13 at 09:03

CodingIntrigue

75,930
30
170
176

is there anyway to do this with pure javascript? – Syed Rasheed May 23 '16 at 10:44
1

@SyedRasheed Really you just need to replace the jQuery selector, which is as simple as `[].map.call(document.querySelectorAll("...criteria", ...);` - [jsFiddle Example](https://jsfiddle.net/5m3bka63/) – CodingIntrigue May 23 '16 at 10:50

score 4 · Answer 2 · answered Sep 23 '13 at 09:03

4

try with loop each of jquery

$("input:checkbox").each(function(){
    var $this = $(this);    
    if($this.is(":checked")){
        console.log($this.attr("id"));
    }
});

answered Sep 23 '13 at 09:03

NaYaN

1,300
7
11

score 1 · Answer 3 · answered Sep 23 '13 at 09:06

1

Try this piece of code

var selected = new Array();
$('input:checked').each(function() {
    selected.push($(this).attr('id'));
});

And you get all checked check box id in selected array. Here is jsfiddle

answered Sep 23 '13 at 09:06

iJade

23,144
56
154
243

score 1 · Answer 4 · answered Sep 23 '13 at 10:18

You can use first :nth-child selector to get <td> elements having checkboxs in the grid. Then you can use >input:checked selector to get all checked checkboxs. After you have jQuery object which contains the requested checkboxes you can use .closest("tr.jqgrow") to get rows having the checkboxes. The ids of the rows is what you need. You can use $.map to get all ids in the array. The full code will be

$("#getIds").button().click(function () {
    var $checked = $grid.find(">tbody>tr.jqgrow>td:nth-child(" +
                   (iCol + 1) + ")>input:checked"),
        ids = $.map($checked.closest("tr.jqgrow"),
                    function (item) { return item.id; });
    alert("The list of rowids of the rows with checked chechboxs:\n" + ids.join());
});

where the index of the column with checkboxs iCol you can get using getColumnIndexByName function

var getColumnIndexByName = function (grid, columnName) {
    var cm = grid.jqGrid("getGridParam", 'colModel'), i, l;
    for (i = 0, l = cm.length; i < l; i += 1) {
        if (cm[i].name === columnName) {
            return i; // return the index
        }
    }
    return -1;
};

which I frequently used in my old answers.

The demo demonstrate the above code live.

Oleg -- Actually I want it like this. I have a dialog box which asks "Are you sure you want to delete ?". On clicking yes, I need to get id'd of checked check boxes and send it to a method in a list. Can you help me pls. I don't know anything about jquery/javascript but now assigned with work on this.. — Sanjay Malhotra, Sep 23 '13 at 10:41
@Student: It's almost the same what my demo do. You can use [confirm](http://www.w3schools.com/js/js_popup.asp), [jQuery UI Dialog](http://jqueryui.com/dialog/) (like in [the answer](http://stackoverflow.com/a/3588732/315935)). In any way you should make separate `$.ajax` call to send the data to your server method. — Oleg, Sep 23 '13 at 14:56

Iterate through the list and get checked checkbox id in jquery

4 Answers4