https://github.com/benignware/jquery-checkview
This jQuery plugin enables custom css styling of checkboxes and radiobuttons.
https://github.com/benignware/jquery-checkview
Last synced: 11 months ago
JSON representation
This jQuery plugin enables custom css styling of checkboxes and radiobuttons.
- Host: GitHub
- URL: https://github.com/benignware/jquery-checkview
- Owner: benignware
- License: mit
- Created: 2013-10-17T19:39:55.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2015-07-05T20:38:16.000Z (almost 11 years ago)
- Last Synced: 2023-08-12T18:37:44.263Z (almost 3 years ago)
- Language: JavaScript
- Homepage:
- Size: 328 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
jquery-checkview
================
> This jQuery plugin enables custom css styling of checkboxes and radiobuttons.
Features
--------
* Custom css styling
* Keyboard and Tab control
[Demo](http://benignware.github.io/jquery-checkview)
Usage
-----
Include dependencies
```html
```
Provide markup
```html
Check me!
```
Init checkview as follows:
```js
$("input[type='checkbox'], input[type='radio']").checkview();
```
Set up your css. Take a look at the example styles:
```css
.checkview {
background-color: #FFFFFF;
border: 1px solid #ACACAC;
line-height: 1em;
}
.checkview .icon-ok {
display: inline-block;
background: url('http://cdn.dustball.com/tick.png') no-repeat center;
background-size: contain;
width: 1em;
height: 1em;
}
```
Bootstrap Example
-----------------
Include Bootstrap CSS:
```html
```
Provide Bootstrap Checkbox Markup:
```html
Check me!
```
Configure checkview with Bootstrap's button and icon components:
```js
$(".checkbox input[type='checkbox']").checkview({
wrapperClass: 'btn btn-default btn-xs',
iconClass: 'glyphicon glyphicon-ok'
});
```
Options
-------
NameDescriptionDefault
checkedClassCSS Class to indicate the checkview's statecheckview
iconClassIcon css classicon-ok
preventSubmitSpecifies whether to propagate pressing of enter keyfalse
wrapperClassContainer css classcheckview
wrapperTagContainer tag namespan
Methods
-------
NameDescriptionReturn
getCheckedReturns the checkview's stateboolean
invalidateRefreshes the componentvoid
setChecked(bool)Sets the checkview's statevoid
## Method example
Access plugin-instance and refresh
```
$("#checkview").data('checkview').refresh();
```