Return an array of all checkboxes checked upon click

Question

I've got a table with a checkbox in each row, like this:

<table id='users'>
    <thead>
    ...
    </thead>
    <tbody>
        <tr>
            <td><input type='checkbox' name='users' id='someUserId'></td>
            <td> some variable pid </td>
            <td>...</td>
        </tr>
        <tr>
            <td><input type='checkbox' name='users' id='someOtherId'></td>
            <td> some other variable pid </td>
            <td>...</td>
        </tr>
        ...
    </tbody>
</table>

Now i want to put the text of the columns next to the checkboxes, the pids, into an array, then pass the array to a function. The function should take each record in the array and process them.

My best try so far:

function myFunction(arr[]){...}

function getIds(obj){
var $table = $("#users");
alert($table.attr("id"));
var $cboxes = $table.find("input:checkbox").toArray();
alert($cboxes);

var checkedArray = [];
var pid;
for(i = 0;i < $cboxes.length; i++){
    if($cboxes[i].checked){
        pid = $cboxes.parent().siblings().eq(0).text();
        checkedArray.push(pid);
        alert(pid);
    }
}
alert(checkedArray);
return checkedArray;
}

$("#button").click(function(){
    var ids = getIds();

    for(i = 0; i < ids.length; i++){
        myFunction(ids[i]);
        alert("Function executed for "+ids[i]+".");
    }
});

Answer 1

You can slim this down heavily with the :checked pseudo-selector, and $.map .

 function process (id) { alert(id); } function find () { return $('#users').find('input:checkbox:checked').map(function () { return $(this).parent().next().text(); }).toArray(); } function handle () { find().forEach(process); } $('#btn').on('click', handle); // Pseudo-event 

 <table id='users'> <thead> </thead> <tbody> <tr> <td><input type='checkbox' name='users' id='someUserId'></td> <td> some variable pid </td> <td>...</td> </tr> <tr> <td><input type='checkbox' name='users' id='someOtherId'></td> <td> some other variable pid </td> <td>...</td> </tr> </tbody> </table> <button id="btn">Check!</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

If you don't want to loop twice, you should compress the logic into a single function chain. This cuts down on loops, but still builds the array for later use.

 var myNamespace = {}; function process (id) { alert('Single ID: '+ id); return id; } function find () { return $('#users').find('input:checkbox:checked').map(function () { return process($(this).parent().next().text()); }).toArray(); } function handle () { myNamespace.ids = find(); alert('All IDs: ' + myNamespace.ids) } $('#btn').on('click', handle); // Pseudo-event 

 <table id='users'> <thead> </thead> <tbody> <tr> <td><input type='checkbox' name='users' id='someUserId'></td> <td> some variable pid </td> <td>...</td> </tr> <tr> <td><input type='checkbox' name='users' id='someOtherId'></td> <td> some other variable pid </td> <td>...</td> </tr> </tbody> </table> <button id="btn">Check!</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Answer 2

Try this:

fiddle

 function getIds() {
     var chk = $("#users").find("input:checkbox");
     var pId = [];

     chk.each(function(){
         pId.push($(this).parent().next().html());
     });

     return pId;
 }

 $(function(){
     getIds().forEach(function(i){
         console.log(i);
     });
 });

Find all checkboxes inside the users table, create array, push all pId's into the array then return it from the function. Then just loop through them all.