SwitchBox-JS

A JS library for create switcher via checkbox

Installation

pnpm i @carry0987/switch-box

Usage

Here is a simple example to use SwitchBox-JS

UMD

<divid="app"><h1>Individual Input</h1><inputtype="checkbox" name="switch-1"><inputtype="checkbox" name="switch-2"></div><hr><divid="app-2"><h1>Grouped Input</h1><inputtype="checkbox" name="switch-3" title="Switch-3"><inputtype="checkbox" name="switch-4"><labeldata-switch-for="switch-4">Switch-4</label><inputtype="checkbox" id="switch-5" value="1"><labeldata-switch-for="switch-5">Switch-5</label><inputtype="checkbox" id="switch-6"><labelfor="switch-6">Switch-6</label></div><hr><divid="app-3"><h1>Disabled Input</h1><inputtype="checkbox" id="switch-7"><labelfor="switch-7">Switch-7</label></div><linkhref="dist/theme/switchBox.min.css" rel="stylesheet"><scriptsrc="dist/switchBox.min.js"></script><scripttype="text/javascript">letswitchBox1=newswitchBoxjs.SwitchBox('input[name="switch-1"]',{title: 'Switch 1',checked: true,onUnchecked: function(target){console.log(target);}});switchBox1.onChange=(target,checked)=>{console.log(checked);};letswitchBox2=newswitchBoxjs.SwitchBox('input[name="switch-2"]',{title: 'Switch 2',checked: false,onChecked: function(target){console.log(target);}});letswitchBox3=newswitchBoxjs.SwitchBox('#app-2 input',{bindLabel: false,checked: ['switch-3'],checkedByValue: [1,'1'],styles: {'.switch-box': {'padding': '10px;'}},onLoad: function(switchbox){console.log(switchbox.elements);}});switchBox3.onToggled=function(e,ele){console.log(e.target.checked);console.log(ele);};letswitchBox4=newswitchBoxjs.SwitchBox('#app-3 input',{disabled: ['switch-7'],styles: {'.switch-box': {'padding': '10px;'}}});</script>

ES Module

import{SwitchBox}from'@carry0987/switch-box';import'@carry0987/switch-box/theme/switchBox.min.css';letswitchBox=newSwitchBox('.check-box-list input',{//...});