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..!!

Solution 1

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.

Solution 2

try with loop each of jquery

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

Solution 3

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.

Solution 4

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

View more solutions