Ability to invert selections

[Revadike]

Add a checkbox above the list of checkbox items. Tick the checkbox invert selection (or (de)select all).

Here is the JS-code to make that happen:

const toggler_selector = `#invert_selection`; // change to css selector of the invert selection checkbox
const container_selector = `#tradables`; // change to css selector of the container with all the checkboxes that can be inverted

document.querySelector(toggler_selector).onclick = [...document.querySelectorAll(`${container_selector} [type=checkbox]`)].forEach(elem => elem.checked = !elem.checked);

[antigravities]

Or, you could make your code readable and not bind to .onx because that's bad practice ("less typing" is not a good reason to do that):

document.querySelector("#invert_selection").addEventListener("click", () => {
  Array.from(document.querySelectorAll("#tradables [type=checkbox]").forEach(elem => {
    elem.checked = ! elem.checked;
  });
});

[Revadike]

Please reread the first sentence or your linked answer: Both are correct, but none of them are "best" per se, and there may be a reason the developer chose to use both approaches. Using onclick is fine if you don't intend to use more than 1 event listener.

[antigravities]

Using onclick is fine if you don't intend to use more than 1 event listener.

I disagree. Binding to events like that is not maintainable.

Let's say the project gets bigger and there is something else to attach to that element. Now the author has to go back and find that code to change it, and then write their new code, rather than just adding an event listener in the first place. And that just adds to the fact that x.ony is hilariously archaic and can conflict with other code under the right conditions.

If you're writing your own scripts, fine, go ahead. But don't force this bad practice globally.

[bartervg]

Do I understand correctly that you're proposing a separate checkbox in addition to the select all checkbox? I think that would be confusing and the Gmail-style select all would be better suited to do that.

[Revadike]

How can I best do this?

[bartervg]

If inverse is the only additional option, there could be another label next to select all

For multiple additional options, look at Gmail. There's a small arrow next to the select checkbox (actually divs within divs) that display additional options upon clicking.