Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery to get table row values of selected checkboxes

Tags:

jquery

In the following example http://jsfiddle.net/hU89p/200/

How can I get the row values of selected check boxes on the onClick function

          Select   Cell phone        Rating     Location
                   BlackBerry9650    2/5        UK
                   Samsung Galaxy    3.5/5      US
                   Droid X           4.5/5      REB

in the following table while selecting multiple checkboxes I have to alert the corresponding row values .

function myfunc(ele) {

 var values = new Array();
       $.each($("input[name='case[]']:checked"), function() {
       values.push($(this).val());
       alert("val---"+values);

           )};
              }

For example:

while selecting first two checkboxes I have to get BlackBerry9650, 2/5, UK, and Samsung Galaxy,3.5/5 ,US

How it is possible?

like image 565
divz Avatar asked Sep 02 '13 04:09

divz


3 Answers

I've updated your Fiddle a bit, the resulting code looks like this:
HTML:

<table border="1">
    <tr>
        <th>Select</th>
        <th>Cell phone</th>
        <th>Rating</th>
        <th>Location</th>
    </tr>
    <tr>
        <td align="center">
            <input type="checkbox" class="case" name="case" value="1" />
        </td>
        <td>BlackBerry Bold 9650</td>
        <td>2/5</td>
        <td>UK</td>
    </tr>
    <tr>
        <td align="center">
            <input type="checkbox" class="case" name="case" value="2" />
        </td>
        <td>Samsung Galaxy</td>
        <td>3.5/5</td>
        <td>US</td>
    </tr>
    <tr>
        <td align="center">
            <input type="checkbox" class="case" name="case" value="3" />
        </td>
        <td>Droid X</td>
        <td>4.5/5</td>
        <td>REB</td>
    </tr>
    </tr>
</table>

Script:

$('[name=case]').click(function () {
    checkAll();
});

function checkAll() {
    $('[name=case]:checked').each(function () {
        alert('selected: ' + $(this).val());
    });
}
like image 182
Jacques Avatar answered Oct 12 '22 18:10

Jacques


jsFiddle Demo

If you want them to be separated with commas and spaces you can push every cell on its own and use JS Array .join()

var values = new Array();

$.each($("input[name='case[]']:checked").closest("td").siblings("td"),
       function () {
            values.push($(this).text());
       });

   alert("val---" + values.join(", "));
like image 39
Itay Avatar answered Oct 12 '22 20:10

Itay


$("input[name='case[]']").click(function(){
 var values = new Array();
       $.each($("input[name='case[]']:checked"), function() {
           var data = $(this).parents('tr:eq(0)');
           values.push({ 'callphone':$(data).find('td:eq(1)').text(), 'rating':$(data).find('td:eq(2)').text() , 'location':$(data).find('td:eq(3)').text()});             
       });

       console.log(values);
 });

Example: http://jsfiddle.net/hU89p/213/

for your custom output check this:

Example: http://jsfiddle.net/hU89p/215/

like image 44
trrrrrrm Avatar answered Oct 12 '22 18:10

trrrrrrm