<script src="js/jquery.js"></script>
<script src="js/icheck.js"></script>
<div class="skin-square">
<ul class="list">
<li>
<input type="checkbox" id="ic-2" name="ic" value="2" class="jscheck">
<label for="ic-2">Radio button 2</label>
</li>
<li>
<input type="checkbox" id="ic-3" name="ic" value="3" class="jscheck">
<label for="ic-3">Radio button 3</label>
</li>
<li>
<input type="checkbox" id="ic-4" name="ic" value="4" class="jscheck">
<label for="ic-4">Radio button 4</label>
</li>
<li>
<input type="checkbox" id="ic-5" name="ic" value="5" class="jscheck">
<label for="ic-5">Radio button 5</label>
</li>
</ul>
<ul class="list">
<li>
<input type="radio" id="ir-2" name="ir" value="2" class="jsradio">
<label for="ir-2">Radio button 2</label>
</li>
<li>
<input type="radio" id="ir-3" name="ir" value="3" class="jsradio">
<label for="ir-3">Radio button 3</label>
</li>
<li>
<input type="radio" id="ir-4" name="ir" value="4" class="jsradio">
<label for="ir-4">Radio button 4</label>
</li>
<li>
<input type="radio" id="ir-5" name="ir" value="5" class="jsradio">
<label for="ir-5">Radio button 5</label>
</li>
</ul>
</div>
.ichekcbox, .iradio { display: inline-block; vertical-align: middle; width: 14px; height: 14px; border: none; cursor: pointer; }
.ichekcbox { background: url(icheck_link.svg) no-repeat; }
.ichekcbox.checked { background: url(icheck_active.svg) no-repeat; }
.iradio { background: url(iradio_link.svg) no-repeat; }
.iradio.checked { background: url(iradio_active.svg) no-repeat; }
$(function(){
$('.jscheck').iCheck({
checkboxClass: 'ichekcbox',
increaseArea: '0%'
});
$('.jsradio').iCheck({
radioClass: 'iradio',
increaseArea: '0%'
});
});