Set 'checked' property on HTML Checkbox when row is selected

rustin

I'm trying to have an HTML checkbox in the first column of the table mimic the selection state of the row.

If the row is selected, the html checkbox should be checked. When the row is deselected, the checkbox should be unchecked.

The following code set the correct property, but it's behind by one click. Difficult to describe, the the correct checkboxes get selected AFTER I click to a new selection. Can you help me update this to toggle the checkboxes immediately when a row is selected?

$('.datatable').on('click', function (e) {

    // Get the selected and deselected row nodes
    var rowsSelected = table.rows({selected:true}).nodes();
    var rowsDeselected = table.rows({selected:false}).nodes();

    table.rows(rowsSelected).every(function() {
      $(this.node()).find('td input:checkbox').prop("checked", true);
    });

    table.rows(rowsDeselected).every(function() {
      $(this.node()).find('td input:checkbox').prop("checked", false);
    });


    // Pass the row nodes for selection or deselection
    // table.rows(rowsDeselected).select();
    // table.rows(rowsSelected).deselect();

  });

colin

Hi @rustin ,

This thread should help, it's asking the same thing.

Cheers,

Colin