fancyCheckbox - jQueryプラグイン

fancyCheckboxはPretty Checkboxes with jQueryをプラグイン化していくつか機能を足し使いやすくしたものです。(プラグイン化ということで、ブログを書いていたAaron氏にはメールで許可を頂きました。)

また、WebDesigning 2010年5月号にて「書かないAjax」で紹介の記事と詳しいサンプルを書かせていただいてますので、そちらもぜひごらんください！(このプラグイン以外にも、あまり書かないで使えるjQueryプラグインが紹介されているようですので、そちらも必見です)

機能紹介

Pretty Checkboxes with jQueryは、チェックボックスをul-liのリストで表示して、liに背景画像をつけスタイルを変える方法が紹介されています。このプラグインでは、ul-liでリストを作るなどのアイデアはそのままに、アンケートや商品のオプション選択画面なんかで使い易くなるように機能を追加しました。

[変更]ラベルクリック時にも反応するように
[追加]formのreset機能に対応
[変更]JavascriptをOFFにしたとき通常のチェックボックスとして機能
[変更]スタイルを画像一枚書き換えることで変更可能
[追加]各チェックボックスに選択肢に応じた画像をCSSを追加するだけで表示可能

設置方法(headタグ内)

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<script type="text/javascript" src="jquery.fancyCheckbox.js"></script>
<script type="text/javascript">
$(function(){
	$(".checklist").fancyCheckbox();
});
</script>

<link href="jquery.fancyCheckbox.css" rel="stylesheet" type="text/css" media="screen" />

チェックボックスのHTML

  <form id="demo" name="demo" method="post" action="#">
      <ul class="checklist">
        <li>
          <input name="selectItems2" type="checkbox" id="items1" value="value1" />
          <label for="items1">スペシャル<br />
          ボックス1</label>
        </li>
        <li>
          <input name="selectItems2" type="checkbox" id="items2" value="value2" checked="checked" />
          <label for="items2">スペシャル<br />
          ボックス2</label>
        </li>
        <li>
          <input name="selectItems2" type="checkbox" id="items3" value="value3" />
          <label for="items3">スペシャル<br />
          ボックス3</label>
        </li>
        <li>
          <input name="selectItems2" type="checkbox" id="items4" value="value4" />
          <label for="items4">スペシャル<br />
          ボックス4</label>
        </li>
      </ul>
</form>

fancyCheckbox - jQueryプラグイン

機能紹介

ファイルダウンロード(全コンテンツ版)

ファイルダウンロード(単体配布)

デモページ

設置方法(headタグ内)

チェックボックスのHTML