How to get check box input value from dataTable row collection?

Question

I have a table that serves as a jquery dataTable. Each data row has a check box column. Visitors to the page will click the check boxes to select which items to delete. The dataTable has pagination and filtering enabled, so a visitor may select one or more check boxes on different pages. When the user clicks "delete", I want to be able to grab the value of each selected check box.

I figured out how to get the checked rows as a collection using this: var rowcollection = oTable.$(".call-checkbox:checked", {"page": "all"}); What I haven't figured out is how to iterate through the collection to grab the value of each row's check box input.

Below is the script and the table. Please tell me I'm missing something incredibly obvious.

<script type="text/javascript" charset="utf-8">
 $(document).ready(function () {
        $('#calltable').dataTable({
            "bPaginate": true,
            "bLengthChange": true,
            "bFilter": true,
            "bSort": true,
            "bInfo": true,
            "bAutoWidth": true,
            "bStateSave": true,
            "aoColumnDefs": [
                { 'bSortable': false, 'aTargets': [ -1,0] }
            ]
        });

        // trashcan is the id of the icon users click to delete items 
        // onclick get all the checked rows and do something 
        $("#trashcan")
        .click(function () {

            var oTable = $('#calltable').dataTable();
            var rowcollection =  oTable.$(".call-checkbox:checked", {"page": "all"});
            for(var i = 0; i < rowcollection.length; i++)
            {
             //   GET THE VALUE OF THE CHECK BOX (HOW?) AND DO SOMETHING WITH IT.
             //   
            }
        });

        });
    </script>



<table id="calltable" class="pretty">
 <thead>
  <tr>
   <th><span id="check">Check</span> | 
      <span id="uncheck">U</span> | 
      <img src="/trash_16x16.gif" alt="Delete" id="trashcan" />
   </th>
   <th>phone</th>
   <th>name</th>
   <th>Status</th>
  </tr>
</thead>
<tbody>
  <tr>
   <td>
     <input type="checkbox" class="call-checkbox" value="22" />    
   </td>
   <td>8438740903</td>
   <td>Susan</td>
   <td>S</td>
  </tr>
  <tr>
    <td> 
      <input type="checkbox" class="call-checkbox" value="23" />
    </td>
    <td>9098983456</td>
    <td>Jack Sparrow</td>
    <td>S</td>
  </tr>
 </tbody>
</table>

If your rowcollection contains jQuery dom nodes of checkboxes then it's pretty simple: rowcollection[i].val(); — slash197
– slash197, Commented Sep 8, 2013 at 14:40

Raúl Juárez · Accepted Answer · 2013-09-08 14:43:30Z

28

Use the each function, instead of the for loop like this:

var oTable = $('#calltable').dataTable();
var rowcollection =  oTable.$(".call-checkbox:checked", {"page": "all"});
rowcollection.each(function(index,elem){
    var checkbox_value = $(elem).val();
    //Do something with 'checkbox_value'
});

answered Sep 8, 2013 at 14:43

Raúl Juárez

2,1591 gold badge19 silver badges17 bronze badges

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

1 Comment

Paolo Broccardo Over a year ago

Thank you so much. I've tried a number of different solutions, but this was the right one. Much appreciated!

Brane · Accepted Answer · 2018-05-28 12:14:31Z

2

This is dynamically added checkbox to jquery dataTable.And You will get checked checkbox value.

 var table = $('#tblItems').DataTable({});

Example:

    $(document).on('click', '#btnPrint', function () {
        var matches = [];
        var checkedcollection = table.$(".chkAccId:checked", { "page": "all" });
        checkedcollection.each(function (index, elem) {
            matches.push($(elem).val());
        });


        var AccountsJsonString = JSON.stringify(matches);
        //console.log(AccountsJsonString);
        alert(AccountsJsonString);
    });

edited May 28, 2018 at 12:14

Brane

3,3492 gold badges47 silver badges56 bronze badges

answered May 20, 2016 at 7:31

babun

211 silver badge2 bronze badges

Collectives™ on Stack Overflow

How to get check box input value from dataTable row collection?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related