betterCheckbox is a jquery plugin that allows you to customize your checkbox forms using CSS.
betterCheckbox has been tested and should work in
- Internet Explorer 9
- Safari
- Firefox
- Chrome
- Opera
You can find some examples here.
If you want to use default style include betterCheckbox and its stylesheet on your page before </body> tag
<link href="betterCheckbox.css" type="text/css" rel="stylesheet">
<script src="/path/to/betterCheckbox.min.js"></script>Then just add it to one of DOMs elements
<script>
$('#elementsID').betterCheckbox();
</script>Settable Options
| Option | Description | Data Type | Default |
|---|---|---|---|
| boxClass | Name of the class you want to use for the checkbox | string | 'betterCheckbox-box' |
| tickClass | Name of the class you want to use for the checkmark | string | 'betterCheckbox-tick' |
| tickInnerHTML | Set innerHTML for checkmark div (you can use text as a checkmark) | string | ' ' |
| disabledBoxClass | Name of the class you want to add to the checkbox when disabled | string | 'disabled' |
| disabledTickClass | Name of the class you want to add to the checkmark when disabled | string | 'disabled' |
Methods
| Method | Description |
|---|---|
| disable | Disables the checkbox |
| enable | Enables the checkbox |
| check | Checks the checkbox |
| uncheck | Unchecks the checkbox |
| destroy | Removes plugin functionality |
If you don't want to style checkbox yourself, or you are looking for some specific look, try those plugins:
Fancy checkboxes and radio buttons
jQuery Fancy Custom Radio-button and Checkbox
- betterRadio
betterCheckbox plugin is released under MIT license.
betterCheckbox plugin was created by Michał Kowalkowski. You can contact me at [email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent