jquery-checkview

This jQuery plugin enables custom css styling of checkboxes and radiobuttons.

Features

Custom css styling
Keyboard and Tab control

Usage

Include dependencies

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.checkview.min.js"></script>

Provide markup

Check me!

<label><input type="checkbox"/> Check me!</label>

Init checkview as follows:

$("input[type='checkbox'], input[type='radio']").checkview();

Set up your css. Take a look at the example styles:

.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:

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

Provide Bootstrap Checkbox Markup:

Check me!

<div class="checkbox">
  <label>
    <input type="checkbox"> Check me!
  </label>
</div>

Configure checkview with Bootstrap's button and icon components:

$(".checkbox input[type='checkbox']").checkview({
  wrapperClass: 'btn btn-default btn-xs',
  iconClass: 'glyphicon glyphicon-ok'
});

Options

Name	Description	Default
checkedClass	CSS Class to indicate the checkview's state	checkview
iconClass	Icon css class	icon-ok
preventSubmit	Specifies whether to propagate pressing of enter key	false
wrapperClass	Container css class	checkview
wrapperTag	Container tag name	span

Methods

Name	Description	Return
getChecked	Returns the checkview's state	boolean
invalidate	Refreshes the component	void
setChecked(bool)	Sets the checkview's state	void

Method example

Access plugin-instance and refresh

$("#checkview").data('checkview').refresh();