Checkswipe.js

This library requires JavaScript!Unfortunately, that is the requirement when using at a JavaScript library.Don't worry though, as all checkboxes still work exactly as normal.

Try it

"Click-and-drag" over the checkboxes to quickly toggle them. Works on mobile.

Get it

Add the attribute data-checkswipe to any group.

<fieldset data-checkswipe>
  <input type=checkbox>
  <input type=checkbox>
</fieldset>

Import the library with this line of code:

Use CDN

<script src=/js/checkswipe.js defer></script>

<script
  src=https://cdn.jsdelivr.net/gh/vladdesv/checkswipe@4.0.0/checkswipe.js
  integrity=sha384-CVpUvOxmimCjFOUtPrHKzVAHpKHV7C16hBzE95skykVoF9NorxV5hrYEYV749fcN
  crossorigin=anonymous
  defer
></script>

See the latest release (direct link) and the source code on GitHub.

Test it

Is it really faster?
— You

Try it out for yourself and see how fast you can toggle all checkboxes.

Timer starts on the pointerdown event and stops when all checkboxes are checked.

Emprically tested, I can swiple all checkboxes ~7× times faster than pressing them individually.

Use it

To enable Checkswipe.js:

include the script
add the attribute data-checkswipe to any group

CSS animations

You can tweak CSS animation by overriding these properties:

--checkswipe-scale, default: 1.3
--checkswipe-duration, default: 0.1s
--checkswipe-easing, default: cubic-bezier(...)
--checkswipe-delay, default: 0.1s

You can effectively "disable" the animation by setting the variable --checkswipe-scale to none.

Try it here:

Disable CSS completely

To disable CSS completely, add data-no-css to the script tag.

<script data-no-css src=/js/checkswipe.js defer></script>

Content Security Policy

Checkswipe.js does not create any style elements nor add any inline style attributes, and thus operates under very strict CSP directives. script-src 'self' is the only directive needed to use this script. (No 'unsafe-*' are needed.)

Love it?

If this project made you smile, send me a pricey coffee :^)

Examples

Here be dragons.

Multiple groups

Only checkboxes in their current group will be swipeable. You can have multiple groups, and they will not interfere with each other.

The two groups below each have their own data-checkswipe attribute. Swiping in one group does not grow the checkboxes in the other.

Group 1 Option 1 Option 2 Option 3

Group 2 Option 1 Option 2 Option 3

Group checkboxes in same container

Tables are a bit cumbersome since they do not follow a conventional "grouped" structure, but checkboxes can be split into independent swipeable groups within the same container.

Add the attribute data-checkswipe-group=name to checkboxes, and a swipe only affects checkboxes with the same group name.

Every checkbox has an inherent empty string name '' by default.

1	2	3	4

Ignoring checkboxes

To completely exclude checkboxes from being swipeable, add the attribute data-checkswipe-ignore to the checkbox.