theme development - Checkboxes on custom `WP_List_Table` also check select all

admin管理员组

文章数量:1122846

In a bespoke theme, I have a custom class that extends WP_List_Table. The relevant parts look somewhat like this:

class Custom_List_Table extends WP_List_Table
    function get_columns(): array
    {
        return [
            'cb' => '<input type="checkbox" />'
        ];
    }

    protected function column_cb($item)
    {
        return sprintf(
            '<input type="checkbox" name="%1$s[]" value="%2$s" id="cb-select-%2$s" />' . '<label for="cb-select-%2$s"><span class="screen-reader-text">%1$s</span></label>',
            /*$1%s*/ $this->_args['singular'],
            /*$2%s*/ $item['id']
        );
    }
}

This works, but I noticed something curious that does not appear to happen with other list tables in the WordPress admin.

When I click a checkbox of an individual row, the select all checkboxes in the table header and footer also get activated. Curiously, it does not trigger the actual select all functionality, so the other rows remain unaffected. This causes a state discrepancy, since the select all checkboxes imply all rows are checked, which is not true. (See screenshot.)

Does anyone recognize this behavior? I can’t seem to find anything about this being a known bug.

In a bespoke theme, I have a custom class that extends WP_List_Table. The relevant parts look somewhat like this:

class Custom_List_Table extends WP_List_Table
    function get_columns(): array
    {
        return [
            'cb' => '<input type="checkbox" />'
        ];
    }

    protected function column_cb($item)
    {
        return sprintf(
            '<input type="checkbox" name="%1$s[]" value="%2$s" id="cb-select-%2$s" />' . '<label for="cb-select-%2$s"><span class="screen-reader-text">%1$s</span></label>',
            /*$1%s*/ $this->_args['singular'],
            /*$2%s*/ $item['id']
        );
    }
}

This works, but I noticed something curious that does not appear to happen with other list tables in the WordPress admin.

When I click a checkbox of an individual row, the select all checkboxes in the table header and footer also get activated. Curiously, it does not trigger the actual select all functionality, so the other rows remain unaffected. This causes a state discrepancy, since the select all checkboxes imply all rows are checked, which is not true. (See screenshot.)

Does anyone recognize this behavior? I can’t seem to find anything about this being a known bug.

• theme-development
• wp-list-table

Share Improve this question asked Apr 17, 2024 at 11:13 ACJACJ 6355 bronze badges 5

• did you check the issue Via inspect element? like did you check for the input id, class, etc, are not duplicating. Please also check the console errors. – msz Commented Apr 22, 2024 at 14:53
• I did, @msz. Nothing noteworthy there. – ACJ Commented Apr 23, 2024 at 11:40
• My guess would be the the checkboxes you're adding aren't correct and are confusing the "select all" or that there's some malformed HTML in your output. Hard to tell any of this without actually seeing the output and process. – Tony Djukic Commented Apr 24, 2024 at 15:53
• @ACJ can you possibly share the whole code here for the custom class you're using. It'd be easier that way to replicate the issue for a quicker resolution. – Kumar Commented Apr 25, 2024 at 6:27
• @ACJ Along with the code, HTML output would be helpful. – Kumar Commented Apr 25, 2024 at 6:40

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

I ran into this same problem and did some digging. The jQuery selector to find the checkboxes includes an iedit class on the table <tr> elements. I assume this class is added via JavaScript on tables that have inline editing, but my <tr> elements had no classes as I'm not using inline editing.

I was able to solve the issue by adding this method to my table class. You may need to do some minor tweaking to get the iedit class there if you already have a class attribute on your rows.

public function single_row( $item ) {
    ob_start();
    parent::single_row( $item );
    $output = ob_get_clean();
    echo str_replace( '<tr>', '<tr class="iedit">', $output );
}

And here's the source JavaScript with the issue: https://github.com/WordPress/wordpress-develop/blob/b4889e474c77ba4ed7a492441fd948eb124a3e77/src/js/_enqueues/admin/common.js#L1172

本文标签： theme developmentCheckboxes on custom WPListTable also check select all