iCheck example

by Martin Murciego

HTML

<script src="https://cdn.rawgit.com/fronteed/icheck/1.x/icheck.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
  <ul class="listview checkbox-strip">
    <li>
      <label class="checkbox checked">
        <input name="feature-1" value="1" checked="" type="checkbox">
        <span class="label-text">Feature 1<span class="icon-check"></span></span>
      </label>
    </li>
    <li>
      <label class="checkbox checked">
        <input name="feature-2" value="2" checked="" type="checkbox">
        <span class="label-text">Feature 2 - with a longer text label<span class="icon-check"></span></span>
      </label>
    </li>
    <li>
      <label class="checkbox">
        <input name="feature-3" value="3" type="checkbox">
        <span class="label-text">Feature 3<span class="icon-check"></span></span>
      </label>
    </li>
  </ul>
  <ul class="listview">
    <li>
      <label class="radiobutton checked">
        <input name="amt2" value="10" checked="" type="radio">
        <span class="label-text">$<strong>10</strong></span>
      </label>
    </li>
    <li>
      <label class="radiobutton">
        <input name="amt2" value="25" type="radio">
        <span class="label-text">$<strong>25</strong></span>
      </label>
    </li>
    <li>
      <label class="radiobutton">
        <input name="amt2" value="50" type="radio">
        <span class="label-text">$<strong>50</strong></span>
      </label>
    </li>
    <li>
      <label class="radiobutton">
        <input name="amt2" value="100" type="radio">
        <span class="label-text">$<strong>100</strong></span>
      </label>
    </li>
  </ul>
  <fieldset class="radio-strip">
    <label class="checked">
      <input name="amt" value="10" checked="" type="radio">
      <span class="label-text">$<strong>10</strong></span>
    </label>
    <label>
      <input name="amt" value="25" type="radio">
      <span...

CSS

/* iCheck plugin Square skin, blue
----------------------------------- */

.icheckbox_square-blue,
.iradio_square-blue {
  display: inline-block;
  *display: inline;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 22px;
  height: 22px;
  background:...

JavaScript

jQuery('input').iCheck({
  checkboxClass: 'icheckbox_square-blue',
  radioClass: 'iradio_square-blue',
  increaseArea: '20%' // optional
});