How do i uncheck all header checkbox using jquery

DeepaMGMG

Hello,

I am using a gyrocode checkbox plugin with my DataTable.
Initially i check some records, edit them and uncheck the checkbox using this below code.

$('input[type="checkbox"]', table.cells().nodes()).prop('checked',false);

Now i again select some other records, this time when i fetch IDs of selected checkbox, previous records are included in the array returned.

So i decided to uncheck the main check box in a header column which will select/ Deselect all the records.
How do i do that ?

colin

Hi @DeepaMGMG ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

DeepaMGMG

Formatted

DeepaMGMG

Formatted

DeepaMGMG

Hi Colin, Thank you so much for help.

I am unable to use live.datatables.net. I will try to explain my issue below here.

==> I Have a DataTable , which have a checkboxes for 1st column, EDIT button.

var hrtable = $('#employee_attendance_tbl').DataTable({
   "ajax":{
            "url" : ajax_call_data,
            "type": "GET",
            "dataType" : "json",
            "dataSrc":""
   },
"columns" : [
                { "data": "DT_RowId","orderable": true},
                 ........
                },
                              
    ],  
 columnDefs: [
                      {'targets': [0],'checkboxes': {
                               'selectRow': false,
                               'selectCallback': function(){
                                  printSelectedRows();
                               }
                            }
                        },
                     .........
                   ],
        'select': {
             'style': 'multi',
              'selector' : 'td:first-child'
          },
      'order': [[1, 'asc']],
      buttons: [
            {
                text: 'Edit',
                className: 'custume-btn edit-multiple-records'               
            }
        ]

});

// Print selected rows
    function printSelectedRows(){       
       var rows_selected = hrtable.column(0).checkboxes.selected();
       selectedids=[];
        $.each(rows_selected, function(index, DT_RowId){
             selectedids.push(DT_RowId);
         });
           return selectedids;
    };

==> Now i check 2 checkboxes and click on EDIT button. Onclick my data process and i want to reset all the checkboxes which are set. Below is onclick function.

$('.edit-multiple-records').on('click',function(e){
        //Process the data. Here selectedids is [1, 2]
       //Now i want to uncheck the checkboxes
    $('input[type="checkbox"]', table.cells().nodes()).prop('checked',false); 
    });

==> But $('input[type="checkbox"]', table.cells().nodes()).prop('checked',false); is unchecking only in UI. i.e this time i check row 3 and 4. When i fetch the selected ids, instead of returning [3, 4] it returns [1,2,3,4]

colin

Hi @DeepaMGMG ,

With live.datatables.net, you can create the scenario still, with the data in data, something like this.

Cheers,

Colin

DeepaMGMG

https://jsfiddle.net/4se305dt/10/

Please have a look here

kthorngren

I think it would work better to use the Gyrocode Checkboxes API. This way that plugin will keep track of the checkbox state. Something like this:
https://jsfiddle.net/makj8wo2/

Kevin

DeepaMGMG

table.columns().checkboxes.deselect(true);

This is what i needed. Helped a lot. Thank you @kthorngren and @colin