jQuery Mobile逆引きリファレンス
Checkboxradioでラジオボタン／チェックボックスを作成するには？
標準のラジオボタン／チェックボックスをリッチな選択ボタンに整形できるCheckboxradioウィジェットの基本的な使い方を解説する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
Checkboxradioウィジェットを利用することで、標準のラジオボタン／チェックボックスをリッチな選択ボタンに整形できます。ラジオボタンは複数から単一の選択肢を選ばせる場合に、チェックボックスは複数の選択肢を選ばせる場合に、それぞれ利用します。
機能そのものは明快なので、さっそく具体的なコードを見ていきます。
Checkboxradioウィジェットの基本
まずは、Checkboxradioウィジェットを利用して、チェックボックス／ラジオボタンを作成します。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<form method="POST" action="">
<!--ラジオボタンで単一選択ボタンを作成-->
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>使用環境：</legend>
<input id="entry_os_win" name="entry_os" type="radio" value="win" />
<label for="entry_os_win">Windows系</label>
<input id="entry_os_mac" name="entry_os" type="radio" value="mac" />
<label for="entry_os_mac">Mac系</label>
<input id="entry_os_lin" name="entry_os" type="radio" value="linux" />
<label for="entry_os_lin">Linux系</label>
</fieldset>
</div>
<!--チェックボックスで複数選択ボタンを作成-->
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>好きな言語：</legend>
<input id="entry_lang_cs"
name="entry_lang_cs" type="checkbox" value="cs" />
<label for="entry_lang_cs">C#</label>
<input id="entry_lang_java"
name="entry_lang_java" type="checkbox" value="java" />
<label for="entry_lang_java">Java</label>
<input id="entry_lang_php"
name="entry_lang_php" type="checkbox" value="php" />
<label for="entry_lang_php">PHP</label>
</fieldset>
</div>
</form>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
チェックボックス／ラジオボタンはそれぞれ「<input type="checkbox">」／「<input type="radio">」で表せます。それぞれを列挙した上で、全体を<fieldset data-role="controlgroup">～<fieldset>（＝コンテナー要素）でくくってください。その場合、項目ラベルは<legend>要素で表します。
これによって、jQuery Mobileは複数のチェックボックス／ラジオボタンを余白なしに列挙、先頭／末尾の項目にだけ角丸効果を付与し、1つのグループであることを表現します。
［Note］単一のチェックボックスも設置できる
ラジオボタンは複数まとめて設置するのが基本ですが、チェックボックスは単一で設置し、いわゆるオン／オフボタンのような役割を与えることもできます。
|
<div class="ui-field-contain">
<label for="entry_news">メールニュースを希望：</label>
<input id="entry_news" name="entry_news" type="checkbox" value="need" />
</div>
|
チェックボックス／ラジオボタンを横並びに配置する
コンテナー要素に対して「data-type="horizontal"」属性を付与することで、チェックボックス／ラジオボタンを横並びに配置することもできます。
|
<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>使用環境：</legend>
<input id="entry_os_win" name="entry_os" type="radio" value="win" />
<label for="entry_os_win">Windows系</label>
<input id="entry_os_mac" name="entry_os" type="radio" value="mac" />
<label for="entry_os_mac">Mac系</label>
<input id="entry_os_lin" name="entry_os" type="radio" value="linux" />
<label for="entry_os_lin">Linux系</label>
</fieldset>
</div>
|
横並びのレイアウトでは、チェックアイコンは非表示で、テキストだけが表示されます（横幅を節約するためです）。しかし、それでも画面の幅を超えるような場合は、以下のように途中で改行が挟まれます。これは見栄えもよくないので、まずは縦並びを基本とし、横並びにする場合にも、テキストの長さ、選択肢の個数に留意してください。
チェックアイコンの表示位置を変更する
チェックアイコンの位置は、data-iconpos属性（left、right、top、bottom）で変更できます。
|
<fieldset data-role="controlgroup" data-iconpos="right">
<legend>使用環境：</legend>
<input id="entry_os_win" name="entry_os" type="radio" value="win" />
<label for="entry_os_win">Windows系</label>
<input id="entry_os_mac" name="entry_os" type="radio" value="mac" />
<label for="entry_os_mac">Mac系</label>
<input id="entry_os_lin" name="entry_os" type="radio" value="linux" />
<label for="entry_os_lin">Linux系</label>
</fieldset>
|
notext（テキストなし）も指定できますが、一般的にチェックアイコンだけの表示では意味がないので、利用すべきではありません。また、「data-type="horizontal"」属性の場合は、そもそもチェックアイコンが表示されませんので、data-iconpos属性は無視されます。
※以下では、本稿の前後を合わせて5回分（第17回～第21回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
17. Collapsiblesetウィジェットで開閉可能なパネルを作成するには？
コンテンツ本体の表示／非表示を切り替える「開閉可能パネル」を束ねた「アコーディオンパネル」を、Collapsiblesetウィジェットで作成する方法を解説する。
18. jQuery Mobileページで複数列からなるグリッドレイアウトを作成するには？
標準機能を使ってグリッドレイアウトを作成する方法を解説。複数行にまたがるレイアウトや、レスポンシブレイアウトへの対応も説明する。
19. 【現在、表示中】≫ Checkboxradioでラジオボタン／チェックボックスを作成するには？
標準のラジオボタン／チェックボックスをリッチな選択ボタンに整形できるCheckboxradioウィジェットの基本的な使い方を解説する。
20. Flipswitchウィジェットでオン／オフ選択のためのフリップスイッチを作成するには？
オン／オフに特化した選択ボタンを設置するには、CheckboxradioウィジェットよりもFlipswitchウィジェットが便利。その基本的な使い方を解説する。
21. Selectmenuウィジェットで選択メニューを作成するには？
複数の選択肢から1つもしくは複数をページ閲覧者に選択させたいときに、通常の「ラジオボタン／チェックボックス」ではなく、タップして初めて選択オプションが表示される「選択メニュー」を使いたい場合がある。これを手軽に作成する方法を説明する。
