Get checkbox status

arnorbld

Hi guys,

I have a table with a column that has a checkbox in it. When the row or checkbox is clicked I use jQuery to set the "checked" attribute on the checkbox. This works fine. When a button is clicked I need to get information from each checkbox that is checked. I can loop through the rows in the table with something like this:

    jQuery("[name='table-checkboxes']").each(function (index) {
      var isChecked  = jQuery(this).prop('checked');
      // add data to an array
    }

The problem is if there are multiple pages, this code ONLY works on the page currently selected.

I'm trying to figure out how I can do the same thing with DataTables. I'm new to DT and fairly new to JavaScript/jQuery too! I have experimented with a few things, like:

rowcollection = table.$(".checkbox-file:checked", {"page": "all"});

When when I check the resulting array I cannot see anywhere that it's registering the checkboxes being checked. Same with another approach:

table.rows().every(function(rowIdx, tableLoop, rowLoop){
    var row = table.row(rowIdx);
    var data = this.data();

When I log the data array I get:

<input name="table-checkboxes" title="Click to Select" id="10t5Hx-QRFxMGo2o8OrR0iLfQxwGy3ohX" type="checkbox" class="checkbox-file">

on a checkbox that is checked. When I inspect the elements in Chrome this checkbox shows as:

<input name="table-checkboxes" title="Click to Select" id="10t5Hx-QRFxMGo2o8OrR0iLfQxwGy3ohX" type="checkbox" class="checkbox-file" checked="checked">

with the checked="checked" attribute which is correct.

I would very much appreciate any help on this or links to some good examples that explain how to do this

Best regards,
Arnor

kthorngren

Your first option doesn't work because the only rows in the DOM are the rows being displayed. In a round about way you will want to use row().node() to get the HTML for each row.

This example uses row-selector as a function to filter rows that have the checkbox checked. It uses the node parameter to get the tr, finds the checkbox and returns the checked checkboxes. It returns rows().data() and uses toArray() to result in a Javascript array. You can remove toArray() if you want the API instances instead.

http://live.datatables.net/mutavegi/1/edit

Kevin

capegreg

kthorngren,

Thanks so much for the jsbin example and making sense of the node data for me. Only difference is that I'm using the class name on the checkbox instead.

adding checkbox on render
data = '<input type="checkbox" class="dt-checkboxes">'

var table = $('#mydatatable').DataTable();
var data = table.rows( function ( idx, data, node ) {
return $(node).find('.dt-checkboxes:input[type="checkbox"]').prop('checked');
}).data().toArray();

console.log(data);

colin

I'm not clear if you've resolved the issue or not. If not, could you update Kevin's example to demonstrate the problem, please,

Colin

linehammer

You can use the jQuery prop() method to check or uncheck a checkbox dynamically such as on click of button or an hyperlink etc.

$("#radio1").prop("checked", true);

To check the current state of the checkbox you must instead use the jQuery checked property . It is dynamically updated as the user checks/unchecks.

if(document.getElementById('radio1').checked) {
alert("Checked");
}