kitaoka

チェックボックスとラジオボタンをカスタマイズできる「iCheck.js」

フォームでよく使うチェックボックスやラジオボタンを、簡単にカスタマイズできるプラグイン「iCheck.js」をご紹介します。
利用方法は簡単で、通常通りマークアップされたチェックボックスやラジオボタンに対して、.iCheck()メソッドを呼び出すだけです。同梱されているスキンの種類が豊富で、そのまま利用することも、自分でカスタマイズすることもできます。

 

img01
iCheck

 

まずは上記サイトからプラグインをダウンロードします。

・html
特別な属性などを指定する必要はありません。


・JavaScript

$('input').iCheck({
 checkboxClass: 'icheckbox_minimal-red', // チェックボックスにclass名を追加
 radioClass: 'iradio_minimal-red' // ラジオボタンにclass名を追加
});



カスタマイズするinput要素に対して.iCheck()メソッドを呼び出します。
(上記は、プラグイン付属のスキンMinimalのredを利用する場合の記述方法です。)

<script src="jquery.js"></script>
<script src="jquery.icheck.js"></script>
<link href="skins/minimal/red.css" rel="stylesheet">



また、付属のスキンを利用する場合はjQuery本体とプラグインのほかにCSSも読み込む必要があります。

 

img02


Minimal, Square, Flat, Line, Polaris, Futurico の6タイプのスキンがあり、サイト上でデザインを見ることができます。

 

 

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら