jQueryプラグイン『iCheck』を使ってカッコいいチェックボックス、ラジオボタンを作る

2014.10.21　Posted by Coding_team

Webプログラミング

こんにちは。ウェブラボ技術メモも6回目となりました。

普段Webサイトを制作していると、チェックボックスやラジオボタンなどはデフォルトのものから変更できないものと思い込んでしまう人もいるかと思います。恥ずかしながら私もそうでした。

ところが、実はJQueryでカスタマイズすることが可能なのです。

そこで、今回はjQueryプラグイン『iCheck』を使ってカッコいいチェックボックス、ラジオボタンを作ってみたいと思います。
『iCheck』

今回もjQueryのプラグインを使用しますのでjquery.jsも一緒に読み込ませます。また、CSSもプラグインと一緒に用意されているので一緒に読み込ませます。

■HTML head内

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="icheck.min.js"></script>
<link type="text/css" href="skins/all.css" rel="stylesheet" media="all" />
<script>
$(document).ready(function(){
	$('.type01 input').iCheck({                    //要素の指定
		checkboxClass: 'icheckbox_square-red', //チェックボックスのデザインや色を指定します。
		radioClass: 'iradio_square-blue'       //ラジオボタンのデザインや色を指定します。
	});
</script>

$(document).ready(function(){

$('.type01 input').iCheck({ //要素の指定

checkboxClass: 'icheckbox_square-red', //チェックボックスのデザインや色を指定します。

radioClass: 'iradio_square-blue' //ラジオボタンのデザインや色を指定します。

});

</script>

HTMLは、head内のscriptで指定した値を忘れずに付与してあげましょう。今回はクラスtype01。
これでtype01内のinput要素に反映されるようになります。

■HTML

<div class="type01">
	<ul>
		<li><label><input type="checkbox" name="" id="" /> test</label></li>
		<li><label><input type="checkbox" name="" id="" checked disabled/>
		test(Disabled & checked)</label></li>
		<li><label><input type="radio" name="type" id="" /> test</label></li>
		<li><label><input type="radio" name="type" id="" /> test</label></li>
	</ul>
</div>