Check all checkboxes on checkbox click jquery datatable

Question

I have a jquery datatable I added a checkbox in the header. I want all the checkboxes in my tbody to be checked when the checkbox in the header is checked and unchecked when the checkbox in the header is unchecked.

Here is my jquery datatable

<div style="width:100%; margin:0 auto" class="tablecontainer">
    <table id="tblProveedorToTransfert" class="display nowrap" style="width: 100%;">
        <thead>
            <tr>
                <th><input id="chkAll" name="select_all" value="1" type="checkbox"></th>
                <th>Proveedor</th>
                <th>Precio unitario</th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>

Here is the code when the checkbox in the header is checked.

    $('#chkAll').click(function () {
        if ($(this).prop("checked") == true) {
            primaryTable.rows().every(function (rowIdx, tableLoop, rowLoop) {
                var data_row = this.data();

                secondTable.row.add({
                    "compras_id": data_row.compras_id,
                    "nombre_proveedor": data_row.nombre_proveedor,
                    "numero_contrato": data_row.numero_contrato,
                    "numero_pedido": data_row.numero_pedido,
                    "marca": data_row.marca,
                    "designacion": data_row.designacion,
                    "tipo": data_row.tipo,
                    "referencia": data_row.referencia,
                    "plazo": data_row.plazo,
                    "cantidad_requerida": data_row.cantidad_requerida,
                    "cantidad_pedida": data_row.cantidad_pedida,
                    "precio_unitario": data_row.precio_unitario,
                }).draw();
                rowsIDs.push(data_row.compras_id);
            });
            //check all the checkboxes in the jquery datatable
        }
        else
        {
            rowsIDs = [];
            primaryTable.rows().every(function (rowIdx, tableLoop, rowLoop) {
                var data_row = this.data();
                secondTable.row("#" + data_row.compras_id).remove().draw();
            });
            //uncheck all the checkboxes in the jquery datatable
        }
    });

And here is part of how my columns are made

                "columns": [
                    {
                        "width": "40px", "render": function (data, type, row) { /* index = 0 */
                            return '';
                        }
                    },
                    {
                        "width": "10px", "render": function (data, type, row) { /* index = 0 */
                            return '<input value="0" type="checkbox" class="checkbox"  name="comprasIds" id="comprasIds" data-id="' + row.compras_id + '"  />';
                        }
                    },
                    { "data": "nombre_proveedor", "autoWidth": true }, /* index = 0 */
],

Thank you for your help.

Create a snippet and I'll gladly take a look.

Alexandre Elshobokshy
– Alexandre Elshobokshy

2020-07-03 13:32:06 +00:00
Commented Jul 3, 2020 at 13:32 — Alexandre Elshobokshy
– Alexandre Elshobokshy, Commented Jul 3, 2020 at 13:32

holymoof · Accepted Answer · 2020-07-03 13:32:00Z

2

Try:

  var rows = table.rows().nodes();
  $('input[type="checkbox"]', rows).prop('checked', true);

edited Jul 3, 2020 at 13:32

answered Jul 3, 2020 at 13:16

holymoof

1282 silver badges10 bronze badges

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

1 Comment

J.C Over a year ago

I am not using the standard jquery checkbox datatables so it will not work in my case.

Collectives™ on Stack Overflow

Check all checkboxes on checkbox click jquery datatable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related