Javascript Datatables: Mark multiple rows and press "Enter" flips state of checkbox instead of checkinguncheck

admin管理员组

文章数量:1389539

As the title suggests, i need help with my Javascript datatable. I have some existing logic to handle a "enter" press, when multiple rows is marked. When i press enter, i want this logic:

If all rows are unchecked: Check all rows If all rows are checked: Uncheck all rows If atleast one row is checked: Check all rows

JS is not my strongest side, and i tried many different AI models to get help, but all where unsuccessful. So please head my call and help me resolve this.

Here is my code that reacts on enter keypress today:

    ///enter
    if (charCode == 13) {

        var inputTryOne = $(e.target).find("input[type='checkbox']");
        var inputTryTwo = $(e.currentTarget).find("input[type='checkbox']");
        var input = inputTryOne[0] ?? inputTryTwo[0];
        if (input != undefined) {

            input = $(input);
            var td = input.closest("td");
            td.closest("tr").toggleClass("selected");
            input.prop("checked", !input.prop("checked"));
            input.trigger("change");

            this.parent.lykoGridKeyboardNavigation.moveDown(false, false);

            return;
        }

        thismitEditedCells();
        this.parent.lykoGridKeyboardNavigation.moveDown(false, false); 

        return;
    }

The following code is the response from an AI was the closes to success, but it does not set the state of the row correct, it checks/unchecks the checkbox, but it does not trigger an event so the row "actually gets selected" and is included in calculations / gets a green row color.

if (charCode == 13) {
    var inputTryOne = $(e.target).find("input[type='checkbox']");
    var inputTryTwo = $(e.currentTarget).find("input[type='checkbox']");
    var input = inputTryOne[0] ?? inputTryTwo[0];

    if (input != undefined) {
        // We're dealing with checkboxes

        // Check if we have multiple cells selected
        if (this.parent.selectedCells && this.parent.selectedCells.length > 1) {
            console.log("Multiple cells selected:", this.parent.selectedCells.length);

            // Find all unique rows and their checkboxes
            var rows = [];
            var checkboxes = [];
            var checkedCount = 0;
            var totalCount = 0;

            // Use a map to track unique rows by ID to ensure uniqueness
            var processedRows = {};

            // First gather info about all selected rows
            for (var i = 0; i < this.parent.selectedCells.length; i++) {
                var cell = this.parent.selectedCells[i];
                var row = $(cell).closest('tr')[0];

                if (row) {
                    // Use the row's DOM element as a unique identifier
                    var rowId = row.id || i; // Use index as fallback if no ID

                    if (!processedRows[rowId]) {
                        processedRows[rowId] = true;

                        // Find the checkbox directly from the row
                        var checkbox = $(row).find('input[type="checkbox"]')[0];
                        if (checkbox) {
                            rows.push(row);
                            checkboxes.push(checkbox);
                            totalCount++;

                            // Check its current state
                            if (checkbox.checked) {
                                checkedCount++;
                            }
                        }
                    }
                }
            }

            console.log("Found rows:", rows.length, "Total checkboxes:", totalCount, "Checked:", checkedCount);

            // Determine what action to take
            var setToChecked;
            if (checkedCount === totalCount && totalCount > 0) {
                // If ALL are checked, uncheck all
                console.log("All are checked, unchecking all");
                setToChecked = false;
            } else {
                // If ANY are checked or NONE are checked, check all
                console.log("Not all are checked, checking all");
                setToChecked = true;
            }


            // Update all checkboxes in one go
            for (var j = 0; j < rows.length; j++) {
                // Get the checkbox directly to ensure we're working with the actual element
                var checkbox = checkboxes[j];
                var row = rows[j];

                console.log("Setting checkbox for row", j, "to", setToChecked);

                // Set the checked state
                checkbox.checked = setToChecked;

                // Update row class based on the new state
                if (setToChecked) {
                    $(row).addClass("selected");
                } else {
                    $(row).removeClass("selected");
                }
            }

            return;
        }

        // Single row case - keep the original behavior
        input = $(input);
        var td = input.closest("td");
        td.closest("tr").toggleClass("selected");
        input.prop("checked", !input.prop("checked"));
        input.trigger("change");

        this.parent.lykoGridKeyboardNavigation.moveDown(false, false);
        return;
    }

    thismitEditedCells();
    this.parent.lykoGridKeyboardNavigation.moveDown(false, false);
    return;
}

本文标签：