Get checkbox status
Get checkbox status
arnorbld
Posts: 123Questions: 23Answers: 1
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
This question has an accepted answers - jump to answer
Answers
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-selectoras a function to filter rows that have the checkbox checked. It uses thenodeparameter to get thetr, finds the checkbox and returns the checked checkboxes. It returnsrows().data()and usestoArray()to result in a Javascript array. You can removetoArray()if you want the API instances instead.http://live.datatables.net/mutavegi/1/edit
Kevin
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);
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
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");
}