前端单选复选美化icheck插件使用

<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%'
	});
});