Jquery get values of all checked rows in table gridview

Question

I have a table like below

<table id="mytable">
<tr><th>checked</th><th>id</th><th>text</th></tr>
<tr><td><input id="cb1" type="checkbox" name="checker1"/></td><td>123</td><td>abc</td></tr>
<tr><td><input id="cb1" type="checkbox" name="checker1"/></td><td>456</td><td>def</td></tr>
<tr><td><input id="cb1" type="checkbox" name="checker1"/></td><td>789</td><td>ghi</td></tr>
</table>

I want to retrieve (using jquery) a javascript array of all checked ID's in the table.

So far I have the following jquery code which on the click of the jqcc button brings me an alert box for each of the checked items, so instead of alert, i need to retrieve the value of the second td and add it to an array,

$(document).ready(function() {
    var tableControl= document.getElementById('mytable');
    $('#jqcc').click(function() {
        $('input:checkbox:checked', tableControl).each(function() {
            alert('checked');
        });
    });
});

Nicola Peluchetti · Accepted Answer · 2012-03-14T12:04:17.427

9

You should do

$(document).ready(function() {
    var tableControl= document.getElementById('mytable');
   var arrayOfValues = [];
    $('#jqcc').click(function() {
        $('input:checkbox:checked', tableControl).each(function() {
            arrayOfValues.push($(this).closest('tr').find('td:last').text());
        }).get();
    });
});

arrayOfValues will hold the text inside the last td.

EDIT of course you could also use map

$(document).ready(function() {
    var tableControl= document.getElementById('mytable');
   var arrayOfValues = [];
    $('#jqcc').click(function() {
          arrayOfValues =  $('input:checkbox:checked', tableControl).map(function() {
            return $(this).closest('tr').find('td:last').text();
        });
    });
});

edited Mar 14 '12 at 12:04

answered Mar 14 '12 at 11:56

Nicola Peluchetti

76,206
31
145
192

1

I guess this will add the last td element to the array ?? In actual fact there are other rows after the last td element, so this will not work. Will update the question. Thanks. – general exception Mar 14 '12 at 12:00
You need a `.get()` at the end of your `.map()` function. – Rory McCrossan Mar 14 '12 at 12:02
1

@generalexception this will create an array with the text inside the last ``, you can change the function to get a different td by using a class instead of `td:last` – Nicola Peluchetti Mar 14 '12 at 12:02
@NicolaPeluchetti my td doesent have a class. I need the value of the third TD along. – general exception Mar 14 '12 at 12:04
@RoryMcCrossan yep, forgot that in the hurry of writing, thanks! :) – Nicola Peluchetti Mar 14 '12 at 12:04
@generalexception to get the third td use `find('td:eq(2)')` look here http://jsfiddle.net/n84U8/ – Nicola Peluchetti Mar 14 '12 at 12:07
Done it by replacing $(this).closest('tr').find('td:last').text(); with $(this).parent().next().next().text(); – general exception Mar 14 '12 at 12:07
1

@generalexception that works but is usually better to use closest and the use an eq() because it's more readable – Nicola Peluchetti Mar 14 '12 at 12:08

score 5 · Answer 2 · answered Mar 14 '12 at 11:59

I want to retrieve (using jquery) a javascript array of all checked ID's in the table.

Try:

var ids = $("#mytable tr:has(input:checked)").map(function() {
   var $tr = $(this);
   var id = $tr.find("td:last").text();
   return id;
}).toArray();

alert(ids.join(", "));

score 3 · Answer 3 · answered Mar 14 '12 at 12:01

var tableControl = document.getElementById('mytable');
$('#jqcc').click(function() {
    var result = []
    $('input:checkbox:checked', tableControl).each(function() {
        result.push($(this).parent().next().text());
    });
    alert(result);
});

See demo

score 2 · Answer 4 · answered Mar 14 '12 at 11:59

First of all add the id as the value parameter of the checkbox as an input without a value is of little real use:

<table id="mytable">
    <tr><th>checked</th><th>id</th></tr>
    <tr><td><input id="cb1" type="checkbox" name="checker1" value="123" /></td><td>123</td></tr>
    <tr><td><input id="cb1" type="checkbox" name="checker1" value="456" /></td><td>456</td></tr>
    <tr><td><input id="cb1" type="checkbox" name="checker1" value="789" /></td><td>789</td></tr>
</table>

Then in jQuery, create your array:

var checkedValues = $("input:checkbox:checked", "#mytable").map(function() {
    return $(this).val();
}).get();
alert(checkedValues.join(','));

Working fiddle

score 0 · Answer 5 · answered Mar 14 '12 at 11:59

This does what you ask for:

$(document).ready(function() {
    var tableControl= document.getElementById('mytable');
    $('#jqcc').click(function() {
        var obj = new Array();
        $('input:checkbox:checked', tableControl).each(function() {
            var innertext = $(this).parent().next().text();
            obj.push(innertext);
        });
            console.debug(obj); // Write it to the console
    });
});

http://jsfiddle.net/uEr3n/

Jquery get values of all checked rows in table gridview

5 Answers5

See demo

Linked