Question

Currently I have two tables

I have select-all functions on the top left checkboxes, but clicking on one select-all highlights all checkboxes in BOTH tables, whereas I only want all boxes to be selected in the specific ‘check-all’ clicked.

Also, when I do select all and click one of the directional buttons < or >, it drags all the rows fine but drags the headers with it as shown here:

My JQuery is quite simple at the moment but I’m obviously missing out on something –

 $('#select-all').click(function (event) {
        if (this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function () {
                this.checked = true;
            });
        }
        else
        // Iterate each checkbox
            $(':checkbox').each(function () {
                this.checked = false;
            });
    });

Where ‘select-all’ is the id of the select-all checkbox in the ‘tarifs de quittancement’.

Any help is appreciated

EDIT

My JQuery for the > button code is as follows :

   $("#move-to-1").on("click", function () {
        var selected = $("#table2").find("input:checked");

        selected.each(function (idx, elem) {
            $(elem).closest("tr").detach().appendTo($("#table1 tbody"));
        });
    });

This works fine to move all from one table to the other, but I don’t want the row containing the select-all checkbox/table headers to move with the rest of the row data. How can this be done?

Thanks again.

Further Edit

Now it’s all sorted, except for a small bug where selecting one checkbox row (not select-all) and moving it < or > results in ALL rows being moved.

JQuery in use:

   $('#move-to-1').on('click', function () {
        var selected = $('#table2').find('input:checked');
        selected.each(function (idx, elem) {
            $(elem).closest('tbody').find('tr').detach().appendTo($("#table1 tbody"));
            $('input[type=checkbox]').attr('checked', false);
        });
    });   

   $('#select-all').click(function (event) {
    $(this).closest('table').find(':checkbox').prop('checked', this.checked);
    });

Answer 1

You only need to modify the checkboxes inside the current table. Since you haven’t shown your markup it is extremely hard to guess how the proper selector might look or whether you are using tables at all but try like this:

$('#select-all').click(function (event) {
    $(this).closest('table').find(':checkbox').prop('checked', this.checked);
});

---

UPDATE:

To address your second question, assuming you have separated the headers from the body inside those tables using the <thead> and <tbody> sections which is the correct way, you could adapt your selector:

$('#move-to-1').on('click', function () {
    var selected = $('#table2 tbody').find('input:checked');
    selected.each(function (idx, elem) {
        $(elem).closest('tr').detach().appendTo($("#table1 tbody"));
    });
});