@carry0987/radio-box
v2.1.3
Published
A library for create radio type check box
Downloads
42
Readme
RadioBox-JS
A library for create radio type checkbox
Installation
pnpm i @carry0987/radio-box
Usage
Here is a simple example to use RadioBox-JS
UMD
<div id="app">
<h1>Normal Radio Input (With label)</h1>
<input type="radio" name="radio-normal" id="radio-1" value="Test-1">
<label for="radio-1">Radio-1</label>
<input type="radio" name="radio-normal" id="radio-2" value="Test-2" checked>
<label for="radio-2">Radio-2</label>
</div>
<div id="app-2">
<h1>Other Radio Input</h1>
<input type="radio" name="radio-other" title="Radio-3" value="Test-3">
<input type="radio" name="radio-other" id="radio-4" value="Test-4">
<label data-radio-for="radio-4">Radio-4</label>
<input type="radio" name="radio-other" value="Test-5" data-radio-id="radio-5">
<label data-radio-for="radio-5">Radio-5</label>
</div>
<script src="dist/radioBox.min.js"></script>
<script type="text/javascript">
let radioBox = new radioBoxjs.RadioBox('#app input', {
styles: {
'.radio-box': {
'margin-bottom': '5px'
}
},
onChange: (target) => {
console.log(target);
}
});
console.log(radioBox.value);
radioBox.value = 'Test-1';
let radioBox2 = new radioBoxjs.RadioBox('#app-2 input', {
checked: 1, // You can use index or value
bindLabel: false,
styles: {
'.radio-box': {
'margin-bottom': '10px'
}
},
onLoad: (radioBox) => {
console.log(radioBox.value);
}
});
radioBox2.onChange = (target) => {
console.log(target.value);
};
</script>
ES Module
import { RadioBox } from '@carry0987/radio-box';
import '@carry0987/radio-box/theme/radioBox.min.css';
let radioBox = new RadioBox('#app input', {
//...
});