accessing the value of a checked input in a json generated table

Question

I have a table produced by a getJSON ajax call and I want to loop through and collect the checked values and put them into a database.

The table looks like this:

<div class="content">
<table>
<tr> <td> etc. </td> </tr>
</table>
</div>

The content div exists but the table, the rows and cells are created by the ajax script so:

$.each( data, function( key, value ) {
        var txt =  '<tr>';
            txt += '<td style=\"background:#E3F6CE;\"><input type=\"checkbox\" class=\"case\" value=\"' + this["id"] + '\">';
            txt += '<td><a href=\"/edit/' + this["id"] + '\">'+ this["first"] + ' ' + this["last"]  + '</a></td>';
            txt += '<td>' + this["designation"] + '</td>';
        txt += '<td>' + this["company"] + '</td>';
            txt += '<td>' + this["email"] + '</td>';
            txt += '<td>' + this["remarks"] + '</td>';
        txt += '</tr>';
            $('.content').append(txt);
        });

So far so good, no problems. The table renders fine.

Now, the following:

$(document).ready(function() {
 $(".content").on( "input:checked" ).each(function() {
     //var id = $(this).val();
        var id = $( "input:checked" ).val();
              alert(id);
  });
});

only grabs one id, so if multiple checkboxes are checked it only gets one, not all.

What's going wrong?

Thanks in advance.

look at this : http://stackoverflow.com/questions/9329446/for-each-in-an-array-how-to-do-that-in-javascript — Mohsen Safari, Oct 12 '13 at 08:53
Try my answer it will give you all the checked checkboxes value. — Dhaval Bharadva, Oct 12 '13 at 08:57

Dhaval Bharadva · Accepted Answer · 2013-10-12T11:29:31.983

1

You need to create an array for that try like this.

$(document).ready(function() {

    $(".add").on("click",function(){
        var chk_vals = [];
        $("input:checked").each(function() {
             var id = $(this).val();
             console.log(id); // use this to check each checkbox value in console
             chk_vals.push(id);  
        });
    console.log(chk_vals); // use this to check the result in console.
    });

});

edited Oct 12 '13 at 11:29

answered Oct 12 '13 at 08:56

Dhaval Bharadva

3,053
2
24
35

thanks DH, same result only gets 1 (of multiple) ids! – user1903663 Oct 12 '13 at 09:12
Maurice, I am trying to collect the ids of all the checked checkboxes and then, via ajax, put them into a database – user1903663 Oct 12 '13 at 09:14
url is here: http://richtalent.herokuapp.com/cuse 1) select industry,2 select country 3) "go" 4) seelct shortlist then check checkboxes then click "add". All the ids of selected people should then go to DB with the id of the relevant shortlist they are added to. – user1903663 Oct 12 '13 at 09:17
@user1903663 try to console.log(id) inside the each function. tell me is it giving all the ids.? – Dhaval Bharadva Oct 12 '13 at 09:17
@user1903663 try my updated answer. and tell me is it working or not. also i will check on the same url that you have given. – Dhaval Bharadva Oct 12 '13 at 09:29
@user1903663 one more thing add attribute name="YOUR CHECKBOX NAME" for each checkbox. – Dhaval Bharadva Oct 12 '13 at 09:34
still 1. I think the problem lies with $(.each and delegation (on or live) – user1903663 Oct 12 '13 at 09:45
@user1903663 Try to use live click event but make sure .live is deprecated from jquery 1.9 so you have to use previous version of jquery. – Dhaval Bharadva Oct 12 '13 at 09:49
I am using on not live – user1903663 Oct 12 '13 at 09:51
got to the url above and take a look and view source – user1903663 Oct 12 '13 at 09:53
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/39113/discussion-between-dh-and-user1903663) – Dhaval Bharadva Oct 12 '13 at 10:01

accessing the value of a checked input in a json generated table

1 Answers1