Get Values from row when checked checkbox

Question

I have a table with checkbox like this:

checkbox id size name

checkbox 1 50*50 aaa

checkbox 2 20*20 bbb

At the moment i can count how many check boxes are selected :

$(document).ready(function(){

            var $checkboxes = $('#addA td input[type="checkbox"]');


            $checkboxes.change(function(){
                var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
                $('#count-checked-checkboxes').text(countCheckedCheckboxes);
                console.log(countCheckedCheckboxes);

            });

        });

My question is, when i select for example first checkbox how can i get value of column size? Also How to increment the values for example, imagine that I select all checkboxes on previous example, i would like to have something like:

var $50.50 = 1
var $20.20 = 1

Thanks

EDIT: Table HTML:

    <table id="add-a" class="ad dataTable no-footer" style="width: 1500px;" role="grid">
<thead>
  <tr role="row">
<th align="" class="sorting_asc" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Add?: activate to sort column descending" style="width: 59px;">Add?</th>
<th align="" class="center sorting" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-label="ID: activate to sort column ascending" style="width: 94px;"> ID</th>
<th align="" class="center sorting" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-label="Size: activate to sort column ascending" style="width: 247px;">Size</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_7a53936d" name="checkbox[]" value="300x250_zzzzz" class="r1"></p></b></td>
    <td align="left" class="center">1</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="even" style="background: navajowhite;">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_fd6cb3e4" name="checkbox[]" value="300x250_aaaa" class="r1"></p></b></td>
    <td align="left" class="center">2</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_503dd438" name="checkbox[]" value="300x250_bbbb" class="r1"></p></b></td>
    <td align="left" class="center">3</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="even">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_d68b36ad" name="checkbox[]" value="300x250_cccc" class="r1"></p></b></td>
    <td align="left" class="center">4</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_dd7ff4ea" name="checkbox[]" value="300x250_dddd" class="r1"></p></b></td>
    <td align="left" class="center">5</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="even">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_456f96f3" name="checkbox[]" value="300x250_eeee" class="r1"></p></b></td>
    <td align="left" class="center">6</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_09c16d50" name="checkbox[]" value="300x250_ffff" class="r1"></p></b></td>
    <td align="left" class="center">7</td>
    <td align="left" class="center">300x250</td>
  </tr></tbody>
<tbody>
</tbody>
</table>

Answer 1

Please try this

$checkboxes.change(function(){
    var size= $(this).attr('value').split('_')[0];
});

The split() method is used to split a string into an array of substrings, and returns the new array.

Tip: If an empty string ("") is used as the separator, the string is split between each character.

Note: The split() method does not change the original string.

Answer 2

You got a value of attribute using attr() and you can get or set a value of form element using val() function.

   $(document).ready(function(){

                var $checkboxes = $('#addA td input[type="checkbox"]');

        $checkboxes.change(function(){
        var size= $(this).attr('size');  // get size value
        var val = $(this).val(); //  get value
        $(this).val(val++);  // set value increment by 1 

        });

    });

Answer 3

i just add class="checkbox" to your checkboxes and now i select every checked checkbox and alert val() of this checkbox.... i hope it will help you

 $(".checkbox").click(function(){ $.each($('input[type="checkbox"]:checked'), function() { alert($(this).val()); }); }); 

  <table id="add-a" class="ad dataTable no-footer" style="width: 1500px;" role="grid"> <thead> <tr role="row"> <th align="" class="sorting_asc" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Add?: activate to sort column descending" style="width: 59px;">Add?</th> <th align="" class="center sorting" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-label="ID: activate to sort column ascending" style="width: 94px;"> ID</th> <th align="" class="center sorting" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-label="Size: activate to sort column ascending" style="width: 247px;">Size</th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_7a53936d" class="checkbox" name="checkbox[]" value="300x250_zzzzz" class="r1"></p></b></td> <td align="left" class="center">1</td> <td align="left" class="center">300x250</td> </tr><tr role="row" class="even" style="background: navajowhite;"> <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_fd6cb3e4" class="checkbox" name="checkbox[]" value="300x250_aaaa" class="r1"></p></b></td> <td align="left" class="center">2</td> <td align="left" class="center">300x250</td> </tr><tr role="row" class="odd"> <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_503dd438" class="checkbox" name="checkbox[]" value="300x250_bbbb" class="r1"></p></b></td> <td align="left" class="center">3</td> <td align="left" class="center">300x250</td> </tr><tr role="row" class="even"> <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_d68b36ad" class="checkbox" name="checkbox[]" value="300x250_cccc" class="r1"></p></b></td> <td align="left" class="center">4</td> <td align="left" class="center">300x250</td> </tr><tr role="row" class="odd"> <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_dd7ff4ea" class="checkbox" name="checkbox[]" value="300x250_dddd" class="r1"></p></b></td> <td align="left" class="center">5</td> <td align="left" class="center">300x250</td> </tr><tr role="row" class="even"> <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_456f96f3" class="checkbox" name="checkbox[]" value="300x250_eeee" class="r1"></p></b></td> <td align="left" class="center">6</td> <td align="left" class="center">300x250</td> </tr><tr role="row" class="odd"> <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_09c16d50" class="checkbox" name="checkbox[]" value="300x250_ffff" class="r1"></p></b></td> <td align="left" class="center">7</td> <td align="left" class="center">300x250</td> </tr></tbody> 

Answer 4

here is my jquerycode:

 $(document).ready(function() { $(".checkbox").click(function(){ $.each($('input[type="checkbox"]:checked'), function() { alert($(this).val()); }); }); $('#add-a').DataTable( { "pagingType": "full_numbers" }); });