Get all related value of checked item place in table

Question

I want to know how can I get all values related to a checkbox using jquery. From this picture , when a checkbox is checked all the values related to the checkbox can added to a array or alerted to user. The code of the table is as follows

<table style="border:1px solid black;">
    <tbody>
     <tr>
         <th><input type="checkbox" id="chkAll" name="chkAll"></th>
         <th>From</th>
         <th>Request</th>
         <th>Expires on</th>
         <th>Post Date</th>
         <th>Location</th>
     </tr>
    </tbody>
    <tbody id="showtable">
        <tr>
            <td style="border:1px solid black;"><input type="checkbox" value="fridge" id="1" name="request[]" class="request"> </td>
            <td style="border:1px solid black;"><b><a href="user/">user1</a></b></td><td style="border:1px solid black;"><b>fridge</b></td>
            <td style="border:1px solid black;"><b>12-01-2015</b></td><td style="border:1px solid black;"><b>11/6/2014 2:25 pm</b></td>
            <td style="border:1px solid black;"><b></b></td>
        </tr>
        <tr>
            <td style="border:1px solid black;"><input type="checkbox" value="pizza" id="6" name="request[]" class="request"> </td>
            <td style="border:1px solid black;"><b><a href="user/">user2</a></b></td><td style="border:1px solid black;"><b>pizza</b></td>
            <td style="border:1px solid black;"><b>12-01-2015</b></td><td style="border:1px solid black;"><b>11/7/2014 4:31 pm</b></td>
            <td style="border:1px solid black;"><b></b></td>
        </tr>
    </tbody>
</table>

How can I do this?If you need any other resource please let me know.

Answer 1

Use jquery val() method.

 $('.request').change(function(){
   alert(this.value); //using DOMelement value proprty
   or
   alert($(this).val());
 });

to get all the checked values and pass it into array you can use .map

$('.request').change(function(){
       var checkedvalues = $('.request:checked').map(function(){
          return this.value
        }).get()
       console.log(checkedvalues);
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="border:1px solid black;">
    <tbody>
     <tr>
         <th><input type="checkbox" id="chkAll" name="chkAll"></th>
         <th>From</th>
         <th>Request</th>
         <th>Expires on</th>
         <th>Post Date</th>
         <th>Location</th>
     </tr>
    </tbody>
    <tbody id="showtable">
        <tr>
            <td style="border:1px solid black;"><input type="checkbox" value="fridge" id="1" name="request[]" class="request"> </td>
            <td style="border:1px solid black;"><b><a href="user/">user1</a></b></td><td style="border:1px solid black;"><b>fridge</b></td>
            <td style="border:1px solid black;"><b>12-01-2015</b></td><td style="border:1px solid black;"><b>11/6/2014 2:25 pm</b></td>
            <td style="border:1px solid black;"><b></b></td>
        </tr>
        <tr>
            <td style="border:1px solid black;"><input type="checkbox" value="pizza" id="6" name="request[]" class="request"> </td>
            <td style="border:1px solid black;"><b><a href="user/">user2</a></b></td><td style="border:1px solid black;"><b>pizza</b></td>
            <td style="border:1px solid black;"><b>12-01-2015</b></td><td style="border:1px solid black;"><b>11/7/2014 4:31 pm</b></td>
            <td style="border:1px solid black;"><b></b></td>
        </tr>
    </tbody>
</table>

Check you console for checkedvalues

Answer 2

I created the below code which solved this issue for me:

$('#send_kaving').click(function() {
                    arr=Array();
                    arrNew=[];
                    //arrNew[k]=Array();
                    jQuery('#showtable input:checkbox:checked').each(function(){
                        var v=jQuery(this).val();
                        arr.push(v);
                    });
                    jQuery.each(arr,function(ke,v){
                        var k=ke;
                        arrNew[k]=[];
                        jQuery("#showRequest"+v).find("td").each(function(key,val){
                            // alert(k);
                            var x=jQuery(this).text();
                            arrNew[k].push(x);
                        });
                    });
                    alert(arrNew);

                });

First get all the value of the checked items from the table and stored it in an array.Then from the array value I got the related value of the checkbox of the table row.

Answer 3

To get all the values of checked checkboxes in an array, you can use the :checked selector in conjunction with .map()

var values = $('#showtable input:checkbox:checked').map(function(){
    return this.value
}).get();
alert(values);

This can be called in any place you want

Answer 4

var array = [];
//Filter out the check all th - Also assumes that this table is the only table on the page. If it is not then give the table an id
var $th = $('th:gt(0)');
$('#showtable input:checkbox').on('change',function(){
    var userInfo = {};


    $(this).parent().siblings().each(function(i){
        //You can add the values to array here
        userInfo["'" + $th.eq(i).text().trim() + "'"] = $(this).text().trim();
    });
    //You might want to delete the old data in the array(if exists) before you add the new one 
    array.push(userInfo); 
});