Specify which checkboxes should be swipeable

[vladdeSV]

I would like to implement this at work, but in the table that I want to use there are multiple checkboxes per row – I'm only interested in swiping the ones in the first column.

If we up the supported browsers to allow for :has(), and we explicitly specify what checkboxes to be swipable with the attribute <input type=checkbox data-checkswipe-use>, then the CSS rule could be:

:is([data-checkswipe=checked],[data-checkswipe=unchecked]) input[type=checkbox][data-checkswipe-use],
:is([data-checkswipe=checked],[data-checkswipe=unchecked]):not(:has(input[data-checkswipe-use])) input[type=checkbox] {
  // ...
}

and the JavaScript could be updated to first check if any checkboxes have that attribute and only apply to those, otherwise apply to all.

Alternatively to support IE9 (a goal for me), if there are any tagged checkboxes in a group, we could apply a second tag to the parent data-checkswipe-specific and have the CSS use :not(); the rules would be:

:is([data-checkswipe=checked],[data-checkswipe=unchecked]):not([data-checkswipe-specific]) input[type=checkbox],
:is([data-checkswipe=checked],[data-checkswipe=unchecked]) input[type=checkbox][data-checkswipe-use] {
  // ...
}

(:is() is not supported by IE9, but can be expanded to remove it - using it to better explain my thoughts)

[vladdeSV]

Just want to write down my thoughts on using custom query selector in code, like so: checkswipeAttachGroup(group, querySelecor).

However, I run into the problem that unless I tag elements, I won't be able to know which checkboxes should be enlarged with the current CSS rules.

If not all checkboxes in a group should be enlarged, I am pretty sure I have to tag the inputs.

[vladdeSV]

I hate the idea of the library tagging all inputs by default. Might change my mind on this later.

[vladdeSV]

Implemented and closed in #7.