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-14 12:04:17Z

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, 2012 at 12:04

answered Mar 14, 2012 at 11:56

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

general exception Over a year ago

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.

Rory McCrossan Over a year ago

You need a .get() at the end of your .map() function.

Nicola Peluchetti Over a year ago

@generalexception this will create an array with the text inside the last <td>, you can change the function to get a different td by using a class instead of td:last

general exception Over a year ago

@NicolaPeluchetti my td doesent have a class. I need the value of the third TD along.

Nicola Peluchetti Over a year ago

@generalexception that works but is usually better to use closest and the use an eq() because it's more readable

|

Matthias · Accepted Answer · 2012-03-14 11:59:01Z

5

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(", "));

answered Mar 14, 2012 at 11:59

Matthias

12.3k4 gold badges53 silver badges96 bronze badges

Comments

mVChr · Accepted Answer · 2012-03-14 12:01:32Z

3

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

answered Mar 14, 2012 at 12:01

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2012-03-14 11:59:03Z

2

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

answered Mar 14, 2012 at 11:59

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Comments

Simon Edström · Accepted Answer · 2012-03-14 11:59:35Z

0

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/

answered Mar 14, 2012 at 11:59

Simon Edström

6,6178 gold badges34 silver badges52 bronze badges

Collectives™ on Stack Overflow

Jquery get values of all checked rows in table gridview

5 Answers 5

8 Comments

Comments

See demo

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related