# @carry0987/imgcheckbox

> A library for create checkable img tags

Latest version **3.1.2** (published 2025-08-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @carry0987/imgcheckbox
pnpm add @carry0987/imgcheckbox
yarn add @carry0987/imgcheckbox
bun add @carry0987/imgcheckbox
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.2 |
| Published | 2025-08-07 |
| First published | 2023-10-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 48.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | carry0987 |
| Maintainers | carry0987 |
| Keywords | checkbox, imgcheckbox |

## Links

- npm: https://www.npmjs.com/package/@carry0987/imgcheckbox
- Repository: https://github.com/carry0987/ImgCheckBox-JS
- Homepage: https://github.com/carry0987/ImgCheckBox-JS#readme
- Issues: https://github.com/carry0987/ImgCheckBox-JS/issues
- npm.io page: https://npm.io/package/@carry0987/imgcheckbox

## Recent versions

- 3.1.2 (latest) — 2025-08-07
- 3.1.1 — 2024-10-20
- 3.1.0 — 2024-10-09
- 3.0.4 — 2024-10-09
- 3.0.3 — 2024-10-08
- 3.0.2 — 2024-05-28
- 3.0.1 — 2024-05-28
- 3.0.0 — 2024-05-28
- 2.2.1 — 2024-03-07
- 2.2.0 — 2024-03-03
- 2.1.1 — 2024-02-14
- 2.1.0 — 2023-12-27
- 2.0.2 — 2023-12-27
- 2.0.1 — 2023-12-22
- 2.0.0 — 2023-12-22
- … 5 more at https://npm.io/package/@carry0987/imgcheckbox/versions

## README

# ImgCheckBox-JS
[![version](https://img.shields.io/npm/v/@carry0987/imgcheckbox.svg)](https://www.npmjs.com/package/@carry0987/imgcheckbox)
![CI](https://github.com/carry0987/ImgCheckBox-JS/actions/workflows/ci.yml/badge.svg)  
Seamlessly transform your images into interactive checkboxes with **ImgCheckBox**, a versatile and easy-to-use JavaScript library designed to enhance user interfaces by introducing customizable image-based selection functionality.

## Description
**ImgCheckBox** is a modern, lightweight, and versatile JavaScript library for transforming regular image elements into clickable checkboxes. Wrapped in an intuitive API, it offers a range of customizable options to create a unique and interactive user experience. Whether you're implementing image selection features or looking for a creative way to handle user inputs, **ImgCheckBox** seamlessly integrates with your projects, elevating web interfaces with minimal effort.

## Installation
```bash
pnpm i @carry0987/imgcheckbox
```

## Usage
Here is a simple example of how to use **ImgCheckBox** in your project.

#### UMD
```html
<div>
    <div id="imgList">
        <div class="image">
            <img src="img/example-1.jpg">
        </div>
        <div class="image">
            <img src="img/example-2.jpg">
        </div>
        <div class="image">
            <img src="img/example-3.jpg">
        </div>
    </div>
</div>
<script src="dist/imgCheckBox.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
    const imgCheckBox = new imgCheckBoxjs.ImgCheckBox('#imgList img', {
        graySelected: false,
        scaleSelected: true,
        checkMarkPosition: 'center',
        checkMarkSize: '50px',
        styles: {
            'span.imgCheckbox img': { 'border-radius': '0px' },
            '.image-box .image-layer ~ .imgChked': { 'background-color': 'transparent' }
        },
        preselect: [0, 2],
    });
    imgCheckBox.on('change', (el, checked) => {
        console.log(el);
    });
});
</script>
```

#### ES6
```ts
import { ImgCheckBox } from '@carry0987/imgcheckbox';

document.addEventListener('DOMContentLoaded', () => {
    const imgCheckBox = new ImgCheckBox('#imgList img', {
        //...
    });
    imgCheckBox.on('change', (el, checked) => {
        console.log(el);
    });
});
```

---
_Source: https://npm.io/package/@carry0987/imgcheckbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._