jquery-checkview

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

Features

• Custom css styling
• Keyboard and Tab control

Demo

Usage

Include dependencies

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

Provide markup

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

<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();