Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery Mobile逆引きリファレンス

jQuery Mobile逆引きリファレンス

Checkboxradioでラジオボタン/チェックボックスを作成するには?

2014年5月22日

標準のラジオボタン/チェックボックスをリッチな選択ボタンに整形できるCheckboxradioウィジェットの基本的な使い方を解説する。

  • このエントリーをはてなブックマークに追加

jQuery Mobileとは?

 jQuery Mobileは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、スマホ/タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス: jQuery Mobileを利用するには?」を参照してください。

 Checkboxradioウィジェットを利用することで、標準のラジオボタン/チェックボックスをリッチな選択ボタンに整形できます。ラジオボタンは複数から単一の選択肢を選ばせる場合に、チェックボックスは複数の選択肢を選ばせる場合に、それぞれ利用します。

 機能そのものは明快なので、さっそく具体的なコードを見ていきます。

Checkboxradioウィジェットの基本

 まずは、Checkboxradioウィジェットを利用して、チェックボックス/ラジオボタンを作成します。

HTML
<!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>
チェックボックス/ラジオボタンを設置するコード(checkradio.html)
Checkboxradioウィジェットで生成されたチェックボックス/ラジオボタン

 チェックボックス/ラジオボタンはそれぞれ「<input type="checkbox">」/「<input type="radio">」で表せます。それぞれを列挙した上で、全体を<fieldset data-role="controlgroup">~<fieldset>(=コンテナー要素)でくくってください。その場合、項目ラベルは<legend>要素で表します。

 これによって、jQuery Mobileは複数のチェックボックス/ラジオボタンを余白なしに列挙、先頭/末尾の項目にだけ角丸効果を付与し、1つのグループであることを表現します。

[Note]単一のチェックボックスも設置できる

 ラジオボタンは複数まとめて設置するのが基本ですが、チェックボックスは単一で設置し、いわゆるオン/オフボタンのような役割を与えることもできます。

HTML
<div class="ui-field-contain">
 <label for="entry_news">メールニュースを希望:</label>
 <input id="entry_news" name="entry_news" type="checkbox" value="need" />
</div>
単一のチェックボックスを配置する例(checkradio.html)
オン/オフ式のボタンを表示
チェックボックス/ラジオボタンを横並びに配置する

 コンテナー要素に対して「data-type="horizontal"」属性を付与することで、チェックボックス/ラジオボタンを横並びに配置することもできます。

HTML
<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>
チェックボックス/ラジオボタンを横並びにするコード(checkradio.html)
横並びに配置されたチェックボックス/ラジオボタン

 横並びのレイアウトでは、チェックアイコンは非表示で、テキストだけが表示されます(横幅を節約するためです)。しかし、それでも画面の幅を超えるような場合は、以下のように途中で改行が挟まれます。これは見栄えもよくないので、まずは縦並びを基本とし、横並びにする場合にも、テキストの長さ、選択肢の個数に留意してください。

画面幅を超えた場合には改行が挟まれる
チェックアイコンの表示位置を変更する

 チェックアイコンの位置は、data-iconpos属性(left、right、top、bottom)で変更できます。

HTML
<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>
チェックアイコンを右側に配置したコード(checkradio.html)
チェックアイコンがラベルの右側に配置される

 notext(テキストなし)も指定できますが、一般的にチェックアイコンだけの表示では意味がないので、利用すべきではありません。また、「data-type="horizontal"」属性の場合は、そもそもチェックアイコンが表示されませんので、data-iconpos属性は無視されます。

※以下では、本稿の前後を合わせて5回分(第17回~第21回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery Mobile逆引きリファレンス
17. Collapsiblesetウィジェットで開閉可能なパネルを作成するには?

コンテンツ本体の表示/非表示を切り替える「開閉可能パネル」を束ねた「アコーディオンパネル」を、Collapsiblesetウィジェットで作成する方法を解説する。

jQuery Mobile逆引きリファレンス
18. jQuery Mobileページで複数列からなるグリッドレイアウトを作成するには?

標準機能を使ってグリッドレイアウトを作成する方法を解説。複数行にまたがるレイアウトや、レスポンシブレイアウトへの対応も説明する。

jQuery Mobile逆引きリファレンス
19. 【現在、表示中】≫ Checkboxradioでラジオボタン/チェックボックスを作成するには?

標準のラジオボタン/チェックボックスをリッチな選択ボタンに整形できるCheckboxradioウィジェットの基本的な使い方を解説する。

jQuery Mobile逆引きリファレンス
20. Flipswitchウィジェットでオン/オフ選択のためのフリップスイッチを作成するには?

オン/オフに特化した選択ボタンを設置するには、CheckboxradioウィジェットよりもFlipswitchウィジェットが便利。その基本的な使い方を解説する。

jQuery Mobile逆引きリファレンス
21. Selectmenuウィジェットで選択メニューを作成するには?

複数の選択肢から1つもしくは複数をページ閲覧者に選択させたいときに、通常の「ラジオボタン/チェックボックス」ではなく、タップして初めて選択オプションが表示される「選択メニュー」を使いたい場合がある。これを手軽に作成する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!