⚠️ Touchscreen detected
Checkswipe.js is designed for devices with a mouse cursor, and unfortunately does not work on touchscreens. Sorry!

Try it

"Click-and-drag" over the checkboxes to fastly toggle them.

Tip: right-click and select "Inspect element" to see what the markup looks like!

Get it

Import the library with these two lines:

<script defer src=/js/checkswipe.js onload=checkswipe()></script>
<link rel=stylesheet href=/css/checkswipe.css>

Add the attribute data-checkswipe to any group.

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

See the latest release and the source code on GitHub.

Test it

Is it really faster?
— You

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

Timer starts on the mousedown event; stops when all checkboxes are checked.

with Checkswipe.js
"click-and-drag"

vanilla
click each box

Use it

To enable Checkswipe.js on page load:

  1. add the attribute data-checkswipe to any element (preferably <fieldset>)
  2. after page has loaded, run checkswipe()

Love it?

If this little project made you smile, send me a virtual coffee – it boosts my ego.

Buy Me A Coffee

How it works

checkswipe() looks for every <element> with the attribute data-checkswipe, and attaches a listener to each checkbox inside.

Each <element> is independent, and only checkboxes within them can be swiped.

Intentionally only activates when pressing and dragging over checkboxes – does not affect labels and their text.

Checkboxes growing larger is pure and simple CSS, and is not required – but recommended.

Very self-contained. Only the group and its checkboxes within are affected. At worst, on a mousedown event, a temporary self-removing mouseup handler is applied to the page to detect when the user releases the mouse button.

Note: Each <input type=checkbox> gets event listeners – adding or replacing checkboxes requires to re-run code for those checkboxes.

Examples

These are some use-cases of Checkswipe.js.

Multiple groups

Groups can be used on the same page, and they will not interfere with each other.

Group 1
Group 2

Only target specific checkboxes

Include the attribute data-checkswipe-specify on the group, and add the attribute data-checkswipe-use on the checkboxes you want to be swipeable, and the other checkboxes will remain untouched.

Semi-swipeable checkboxes

Tables

Tables are a bit cumbersome since they do not follow a conventional "grouped" structure, but it's possible to only make checkboxes in certain columns swipeable.

If you want to group different columns of checkboxes together, you unfortunately are out of luck.

Swipeable Text Non-swipe 1 Non-swipe 2
Foofoo
Barbar
Bazbaz