Support for multiple select-all checkboxes targeting different subsets of checkboxes

[asavageiv]

Consider a UI like the one below. The checkboxes at the top should be select-all boxes for their respective check the boxes in their respective columns.

I'm happy to contribute code for this.

The API must remain backwards compatible so here is my thinking:

1. Change checkboxAll to be an Array
2. Add a data-checkbox-select-all-group= param to each checkbox. Boxes with matching groups go together.

For this example it would look something like this:

<form data-controller="checkbox-select-all">
  <input type="checkbox" data-checkbox-select-all-target="checkboxAll" data-checkbox-select-all-group="include-row">
  <input type="checkbox" data-checkbox-select-all-target="checkboxAll" data-checkbox-select-all-group="is-drink">
  <input type="checkbox" data-checkbox-select-all-target="checkboxAll" data-checkbox-select-all-group="eight-percent">

  <div class="row">
    <input type="checkbox" data-checkbox-select-all-target="checkbox" data-checkbox-select-all-group="include-row">
    <input type="checkbox" data-checkbox-select-all-target="checkbox" data-checkbox-select-all-group="is-drink">
    <input type="checkbox" data-checkbox-select-all-target="checkbox" data-checkbox-select-all-group="eight-percent">
  </div>
  <div class="row">
    <input type="checkbox" data-checkbox-select-all-target="checkbox" data-checkbox-select-all-group="include-row">
    <input type="checkbox" data-checkbox-select-all-target="checkbox" data-checkbox-select-all-group="is-drink">
    <input type="checkbox" data-checkbox-select-all-target="checkbox" data-checkbox-select-all-group="eight-percent">
  </div>
</div>

If group is not set then that checkbox is part of the "ungrouped group" by default. get checked() and get unchecked() have to continue to use the "ungrouped group" for backwards compatibility but we could add getCheckedGroup(group) and getUncheckedGroup(group) methods in parallel for users that need this feature.

What do you think?