主なGUI部品を使う (2/5)

では、実際にチェックボックスとラジオボタンを使ってみましょう。ここでは、以下のように部品を配置しておくことにしましょう。

・チェックボックス
１つだけ配置しておきます。idは「check1」としておきましょう。ラベル（横に表示されるテキスト）は適当に設定してください。

・ラジオボタン
２つ配置してください。それぞれ、以下のように属性インスペクタの設定をしておきます。IDは内側の項目（<input>タグの項目）、それ以外は外側のGUI部品の項目（<div>タグの項目）に用意されています。

１つ目：ID「radio1」、ラベル「iPhone」、名前「ラジオボタン」、値「アイフォン」
２つ目：ID「radio2」、ラベル「Android」、名前「ラジオボタン」、値「アンドロイド」

いずれも、「IDは内側の項目、それ以外は外側の項目」に属性として用意されており、インスペクタで設定できます。慣れないうちは混乱するでしょうが、間違えないように設定しましょう。

この他、「テキスト」と「ボタン」も用意しておきましょう。テキストは「text1」というIDにしておきます。またボタンは、「onclick」イベントに「button1Click」という関数を設定しておきます。そして、下のリスト欄のように処理を記述しておきます。

出来上がったら、エミュレータで実行してみてください。チェックボックスとラジオボタンを適当に選択し、ボタンをクリックすると、それぞれの選択状態が上にテキストとして表示されます。チェックボックスについては「ON」「OFF」という表示ですが、ラジオボタンは「アイフォン」「アンドロイド」というように、それぞれの「値」属性に設定したものが表示されることがわかるでしょう。

ここでは、まずdocument.getElementByIdでチェックボックスとラジオボタンのDOMオブジェクトをそれぞれ取得します。そして、そこからチェックボックスのチェック状態と、ラジオボタンの選択された項目をそれぞれ取り出して変数msgに追加しています。

var msg = "check: " + (check1.checked ? "ON" : "OFF");
msg += "<br>radio: " + (radio1.checked ? radio1.value : radio2.value);

この部分ですね。チェックボックスのチェック状態は「checked」で取得することができます。これは真偽値として取得でき、trueならばON、falseならばOFFとなります。ラジオボタンのチェック状態もcheckedで得られますが、ここではその値に応じて、２つのラジオボタンのいずれかの「value」を変数msgに追加しています。先に属性インスペクタの「値」で設定したテキストは、このvalueで取り出すことができるのです。


※ラベルの挙動について
これらの部品を使うとき、ちょっと注意しておきたいのは「表示されるテキストの挙動」です。よくWebサイトなどでは、チェックボックスやラジオボタンのラベルとして表示されているテキストをクリックするとチェックがONになるように作られていますが、Dashcodeでは、テキストをクリックしてもチェックは変わりません。チェックする部分を直接クリックしないとONにできないのです。

こうしたラベルは、HTMLの<label>タグというものを使って作成するのですが、実を言えば、iPhoneに搭載されているSafariでは、この<label>タグが機能しないのです。このため、こういう仕様となっているようです。もし、「テキスト部分をクリックしてチェックをON/OFFできるようにしたい」というなら、テキストの<div>タグに「onclick」イベントの処理を追加し、

var check = document.getElementById( チェックボックスのID );
check.checked = !check.checked;

例えば、このような感じで、クリックするたびにチェックボックスのcheckedを変更するようにしておくとよいでしょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function button1Click(event)
{
	var check1 = document.getElementById("check1");
	var radio1 = document.getElementById("radio1");
	var radio2 = document.getElementById("radio2");
	var msg = "check: " + (check1.checked ? "ON" : "OFF");
	msg += "<br>radio: " + (radio1.checked ? radio1.value : radio2.value);
	var text1 = document.getElementById("text1");
	text1.innerHTML = msg;
}