Checkswipe.js `v3.0`

"Click-and-drag" over HTML checkboxes

⚠️ 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.

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 onload=checkswipe()></script>

<script
  src=https://cdn.jsdelivr.net/gh/vladdesv/checkswipe@3.0.0/checkswipe.js
  integrity='sha-384 hskcDBj244HsZfOpUOdNw3gxzSLnAF9RaR4aro56xiYuzwhnwNbCrdwG0D+ZxD5a'
  crossorigin=anonymous
  defer onload=checkswipe()
></script>

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.

Use it

To enable Checkswipe.js on page load:

add the attribute data-checkswipe to any group
after page has loaded, run checkswipe()

Manual usage

If you wish to not use the default behavior of injecting CSS and swipe-ify automatically, you can do the process manually. For instance, if you do not have control of the HTML and want to swipe-ify elements dynamically, or wish to not animate the checkboxes.

To manually swipe-ify any group, you can use checkswipe.on(group) which will add the correct attribute to the group and handle its checkboxes.

checkswipe.inject() is a fire-once, blow-your-load, self-removing method that will inject CSS into the page and remove itself afterwards. If you wish to never inject CSS into the page, you can remove the method with delete checkswipe.inject.

Content Security Policy

Checkswipe.js injects CSS by default, and the examples on this page uses the inline event handler onload. This might not go well on pages with a restrictive CSP.

CSP Workarounds

By default, a <style id=checkswipe-injected> is injected into the document's <head> for animations. If your website has a restrictive CSP, you can use either:

separate the execution of the script, and inject the styles manually with a provided nonce.

<script src=/js/checkswipe.js></script>
<script nonce='{{ nonce }}'>
    document.addEventListener('DOMContentLoaded', () => {
        checkswipe.inject('{{ nonce }}');
        checkswipe()
    });
</script>

in this case, the js is located at an allowed location, but the inline script required a nonce. this is the appoach i used for work.

copy-and-paste the CSS into your own allowed stylesheet, and disable the injection method in your allowed script file.
```
document.addEventListener('DOMContentLoaded', () => {
    delete checkswipe.inject
    checkswipe()
});
```
some variation of the two above examples.

Love it?

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

How it works

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

Each group 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. The worst offender is a temporary self-removing mouseup handler that is applied to the page on a mousedown event to detect when the user releases the mouse button.

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

Examples

Here be dragons.

Multiple groups

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

Only target specific checkboxes

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.

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

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

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

I love you ❤️