CheckBox-JS

A library for create and manage checkbox elements

Installation

pnpm i @carry0987/check-box

Usage

Here is a simple example to use CheckBox-JS

UMD

<div id="app">
    <input type="checkbox" id="check-all" title="Check All">
    <div class="check-box-list">
        <input type="checkbox" name="check-no-title" checked>
        <input type="checkbox" name="check-1" data-checkbox-id="check-1" value="Test-1">
        <label data-checkbox-for="check-1" class="test">Check-1</label>
        <input type="checkbox" name="check-2" id="check-2" value="Test-2">
        <label for="check-2">Check-2</label>
        <input type="checkbox" name="check-3" id="check-3" value="Test-3">
        <label for="check-3">Check-3</label>
    </div>
    <input type="checkbox" id="check-all-2" title="Check All">
</div>
<link rel="stylesheet" href="dist/theme/checkBox.min.css">
<script src="dist/checkBox.min.js"></script>
<script type="text/javascript">
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;
</script>

ES Module

import { CheckBox } from '@carry0987/check-box';
import '@carry0987/check-box/theme/checkBox.min.css';

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