CODEWITHSUNDEEP
jquerycheckboxjquery-selectors
Jerry
Jerry

Reputation: 13

jQuery to retreve data when checkbox is checked

Instead of using a table, I have the following HTML showing a checkbox in col 1, a name in col 2, and an EMail address in col 3. The HTML looks like this:

<div class="rowLight">
<div class="select"><input name="checkbox" id="chk1" class="chktbl" type="checkbox"></div>
<div class="name">Mary</div><div class="emayl">[email protected]</div>
</div>
<div class="rowDeep">
<div class="select"><input name="checkbox" id="chk2" class="chktbl" type="checkbox"></div>
<div class="name">Jerry</div><div class="emayl">[email protected]</div>
</div>

I need to iterate through each checkbox, and it the box is checked, capture the name & Email address that will be sent to a webservice which will populate an EMail table. I tried something like this, but need help...

var vals = [];
$('.select input[type="checkbox"]:checked').each(function(i) {
var name = $(this).next('.name');
vals.push(($(name).html());
var emayl = $(this).next('.emayl');
vals.push(($(emayl).html()); });

Thanx,
Jerry

Upvotes: 1

Views: 1468

Answers (3)

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

Something like this could work:

var data = $(".select input:checkbox:checked").map(function() {
    var $parent = $(this).closest(".select");
    return {
        name: $parent.next(".name").text(),
        email: $parent.siblings(".emayl").text()
    };
}).get();

Note that the data will look like:

[ { name: '<name>', email: '<email>' }, ... ]

Example: http://jsfiddle.net/andrewwhitaker/rMPDH/

If you truly want the data in just an array:

["<name1>", "<email1>", "<name2>", "<email2>"]

You could try:

var data = $(".select input:checkbox:checked").map(function() {
    var $parent = $(this).closest(".select");

    return [ $parent.next(".name").text(), $parent.siblings(".emayl").text() ];
}).get();

Example: http://jsfiddle.net/andrewwhitaker/4GdC8/

Notes:

  • Using the handy .map to take a jQuery result and transform it into the data you need.
  • Calling .get() at the end of the .map call forces the resulting object into a proper array (as opposed to a jQuery object)
  • Uses .closest(), .next(), and .siblings() to retrieve the proper data.

Upvotes: 3

Ajaxe
Ajaxe

Reputation: 647

Check this fiddle out, Open your browser javascript console i.e either Chrome or firebug in firefox. http://jsfiddle.net/q2jsp/12/

depending on the version of jquery you can use either siblings() or next().next().

Upvotes: 0

Brad Christie
Brad Christie

Reputation: 101614

Here's an alternatvie solution, using rowDeep and rowLight to symbolize rows

$('.rowLight,.rowDeep').each(function(i,e){
    var $row = $(e);

    // see if the checkbox is checked
    if ($row.find('input[type="checkbox"]').is(':checked')){
        var name = $row.find('.name').text(),
            emayl = $row.find('.emayl').text();

        alert(name + ' <' + emayl + '>');
    }
});

DEMO

Upvotes: 0

Related Questions