値を選択するボタンを表示する

値を選択するボタンは以下の２つがあります。

・複数の値から1つだけを選択するウィジェット　ラジオボタン
・いくつかの値を同時に選択できるウィジェット　チェックボックス

これらによる値の選択はクリックかタップでします。デスクトップ画面で表示しているときは、マウスのカーソルが重なると、その位置の選択肢の表示に変化が起きます。これらは同じ種類でのグループ化が可能で、縦、横それぞれに並べて表示できます。レイアウトをするときに必須なのが、<legend>と<label>タグです。<legend>タグは、フィールドのグループ(<fieldset>)を表す名前を設定するもので、表示位置は画面のレイアウト次第ですが、変更することもできます。<label>は、ラジオボタンとチェックボックスにせっていされた選択肢を表す文字列を設定します。

ラジオボタン(<input type="radio">)

ラジオボタンは、name属性の値が同じものが複数集まり同じグループの選択肢となります。同じグループ同士の物をひとつのものとし表示すれば、選択肢のグループを分かりやすく表示できます。

チェックボックス(<input type="checkbox">)

チェックボックスもラジオボタンと同じようにボタンで表示されてグループ化できます。
選択されている状態はレ印のアイコンで表します。横一列でグループ化したときは、選択されたことをレ印ではなくて色で表します。このとき見た目ではラジオボタンと判別ができないので複数選択が可能であることを<legend>で見出しをつけると良いです。

<legend>の表示位置を設定する

同じグループに属するラジオボタン、チェックボックスを<fieldset>～</fieldset>で囲むとき、その部分の見出しを<legend>によって表示できます。デフォルトでは<legend>～</legend>間の文字列はウィジェットのすぐ上にひゅおじされますが、data-role="fieldcontain"が設定されると、その文字列がウィジェットの左に表示されます。

テーマを設定する

ラジオボタン、チェックボックスにテーマを設定するには、それ自身の<input>にdata-theme属性を設定します。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile ラジオボタンを表示する</title>
	<link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css">
	<script src="../js/jquery-1.11.3.js"></script>
	<script src="../js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
	<section id="page" data-role="page">
		<header data-role="header">
			<h1>ヘッダ</h1>
		</header>
		<article data-role="content">
		<!--
		グループ化ありのラジオボタンはお互いにくっついて配置され、
		四隅が丸く表示されます。このグループ化を表すのが
		data-role="controlgroup"です。これはラジオボタンそのものではなくて
		同じグループをラジオボタンを囲むdivやfieldsetタグに追加します。
		-->
		<fieldset data-role="controlgroup">
			<label for="HTML">HTML</label>
			<input id="HTML" name="lang" type="radio" value="1" checked>
			<label for="CSS">CSS</label>
			<input id="CSS" name="lang" type="radio" value="2">
			<label for="JavaScript">JavaScript</label>
			<input id="JavaScript" name="lang" type="radio" value="3">
		</fieldset>

		<!-- 
		横一列でグループ化するには 下記のように
		data-type="horizontal"という設定を追加する。
		このときは、選択された状態は〇で表示するのではなく
		色で選択されている状態を表しています。
		 -->
		<fieldset data-role="controlgroup" data-type="horizontal">
			<label for="HTML2">HTML</label>
			<input id="HTML2" name="lang2" type="radio" value="1" checked>
			<label for="CSS2">CSS</label>
			<input id="CSS2" name="lang2" type="radio" value="2">
			<label for="JavaScript2">JavaScript</label>
			<input id="JavaScript2" name="lang2" type="radio" value="3">
		</fieldset>

		<fieldset data-role="controlgroup">
			<label for="japanese">日本語</label>
			<input id="japanese" name="language" type="checkbox" value="1" checked>
			<label for="english">英語</label>
			<input id="english" name="language" type="checkbox" value="2">
			<label for="spanish">スペイン語</label>
			<input id="spanish" name="language" type="checkbox" value="3">
		</fieldset>

		<div data-role="fieldcontain">
			<fieldset data-role="controlgroup" data-type="horizontal">
				<legend>fieldcontain</legend>
				<label for="japanese_hori">日本語</label>
				<input id="japanese_hori" name="language" type="checkbox" value="1" checked>
				<label for="english_hori">英語</label>
				<input id="english_hori" name="language" type="checkbox" value="2" data-theme="b">
				<label for="spanish_hori">スペイン語</label>
				<input id="spanish_hori" name="language" type="checkbox" value="3">
			</fieldset>
		</div>

		</article>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryMobile ラジオボタンを表示する</title>

</head>

<body>

</header>

<!--

グループ化ありのラジオボタンはお互いにくっついて配置され、

四隅が丸く表示されます。このグループ化を表すのが

data-role="controlgroup"です。これはラジオボタンそのものではなくて

同じグループをラジオボタンを囲むdivやfieldsetタグに追加します。

-->

<label for="JavaScript">JavaScript</label>

</fieldset>

<!--

横一列でグループ化するには下記のように

data-type="horizontal"という設定を追加する。

このときは、選択された状態は〇で表示するのではなく

色で選択されている状態を表しています。

-->

<label for="JavaScript2">JavaScript</label>

</fieldset>

<label for="spanish">スペイン語</label>

</fieldset>

<legend>fieldcontain</legend>

<label for="spanish_hori">スペイン語</label>

</fieldset>

</div>

</article>

</footer>

</section>

</body>

</html>