【JavaScript】チェックボックスとラジオボタンのデザインをカスタマイズする『iCheck』

checkboxes-and-radio-buttons-customization-icheck

フォームなどで使われるチェックボックスとラジオボタンのデザイン。「jQuery」と「Zepto」を使いチェックボックスとラジオボタンのデザインをカスタマイズするライブラリ『iCheck』をご紹介します。

実装イメージ

『iCheck』はいくつかのスキンデータも用意されてあります。ライブラリはデモページからダウンロードできます。

checkboxes-and-radio-buttons-customization-icheck-skin

構成ファイル

『iCheck』を構成ファイルは以下のようになります。CSSフォルダには6種類のスキンデータがフォルダ別に用意されています。

iCheck
├── css/
│   ├── flat/
│   ├── futurico/
│   ├── line/
│   ├── minimal/
│   ├── polaris/
│   ├── square/
│   └── all.css
└── js/
    ├── zepto.js
    ├── icheck.js
    └── jquery.js

利用方法

最初にライブラリの読み込みです。スキンデータのスタイルシート、「jquery.js(またはzepto.js)」、「icheck.js」の3つを設置します。

続けてオプションを設定します。下記の例では、Skinスタイルが「minimal」カラーセット「red」の設定になりま。

/* ライブラリの読み込み・オプション設定 */
<link href="./css/minimal/red.css" rel="stylesheet">
<script src="./js/jquery.js"></script>
<script src="./js/icheck.js"></script>

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal-red',
    radioClass: 'iradio_minimal-red',
    increaseArea: '20%' // optional
  });
});
</script>

チェックボックスとラジオボタンは下記の記述で実装ができます。

/* HTML記述例 */
<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

関連記事

【フォト】世界で美しい星空保護区の星空

みなさんは「星空保護区」というのをご存知ですか?その名前の通り、保護すべき美しい星空が見える地域として認定しようという取り組みです。 国際ダークスカイ協会(IDA)によって世界中の暗い夜空の保護・保存を目指し、保護区を認定する活動が行われています。 UNESCO(ユネスコ)で...続きを読む

2016.07.13フォトギャラリー

新年あけましておめでとうございます。

あけましておめでとうございます。 昨年は格別 の御厚情を賜り、厚く御礼を申し上げます。 本年もデザインスタジオ・エフでは、皆様にご満足頂けるサービスを心がけていく所存でございますので、何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。皆様のご健勝と皆様の益々のご...続きを読む

2019.01.01

デザイナーのための「美しさの論理」入門 〜美術史から“センス”を武器に変える〜

1. センスの正体に、私自身が迷ったときの話 正直に言うと、私はこれまで「センスって、鍛えられるものなんだろうか?」と何度も悩んできました。デザインのバランスがうまく取れず、「なんか惜しいね」と言われることが続いたときの、あのもやもや感……。 配色、構図、余白。なんと...続きを読む

2025.07.19デザイン論

【JavaScript】グラフなどの描画をサポートするライブラリまとめ

折線グラフ、棒グラフ、円グラフやレーダーチャートなどを画像を使わずに描画をするJavaScriptライブラリをまとめてみました。 Chart 6種類のグラフを作成できるJavaScriptライブラリです。描画にはHTML5のcanvasを使用しています。 Dem...続きを読む

2015.03.02HTMLコーディング

【フォト】鬼岩寺1月28日「厄除け火渡り」

藤枝にある鬼岩寺。弘法大師が当地の人々を苦しめていた鬼を退治した話にその名前の由来があり、鬼が鋭い爪を研いだといわれる「鬼かき岩」が残っています。 毎年1月28日には厄除け火渡りの行事が行われています。 フォトギャラリー ※写真をクリックすると拡大表示します。 [...続きを読む

2017.01.28フォトギャラリー