https://github.com/carry0987/checkbox-js

A library for create and manage checkbox elements
https://github.com/carry0987/checkbox-js

checkbox typescript

Last synced: 12 days ago
JSON representation

A library for create and manage checkbox elements

• Host: GitHub
• URL: https://github.com/carry0987/checkbox-js
• Owner: carry0987
• License: mit
• Created: 2023-10-15T13:12:02.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-10-20T07:26:16.000Z (2 months ago)
• Last Synced: 2024-11-22T00:07:48.477Z (about 1 month ago)
• Topics: checkbox, typescript
• Language: TypeScript
• Homepage: https://carry0987.github.io/CheckBox-JS/
• Size: 296 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# CheckBox-JS

[![version](https://img.shields.io/npm/v/@carry0987/check-box.svg)](https://www.npmjs.com/package/@carry0987/check-box)

![CI](https://github.com/carry0987/CheckBox-JS/actions/workflows/ci.yml/badge.svg)  

A library for create and manage checkbox elements

## Installation

```bash

pnpm i @carry0987/check-box

```

## Usage

Here is a simple example to use CheckBox-JS

#### UMD

```html



    

    


        

        

        Check-1

        

        Check-2

        

        Check-3

    

    



let checkBox = new checkBoxjs.CheckBox('#app .check-box-list input', {

    bindLabel: true,

    checkAll: ['#check-all', '#check-all-2'],

    allowShiftKey: true,

    onChange: (total, target) => {

        console.log(target);

        if (target) console.log(target);

    },

    onCheckAll: (total) => {

        console.log(total);

    },

    styles: {

        '#check-all ~ label': {

            fontWeight: 'bold'

        }

    }

});

checkBox.onChange = (total, target) => {

    console.log('Total: ', total);

    if (target) console.log(target);

};

document.getElementById('version').innerText = checkBoxjs.CheckBox.version;

```

#### ES Module

```ts

import { CheckBox } from '@carry0987/check-box';

import '@carry0987/check-box/theme/checkBox.min.css';

let checkBox = new CheckBox('#app .check-box-list input', {

    //...

});

```