ラジオボタンとチェックボックスの使い方

<?xml version="1.0" encoding="UTF-8"?>
	<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
		<xp:table id="radioGroupTable">
			<xp:tr>
				<xp:td>
					<xp:radioGroup id="radioGroup" defaultValue="1">
						<xp:selectItem itemLabel="りんご" itemValue="1"></xp:selectItem>
						<xp:selectItem itemLabel="みかん" itemValue="2"></xp:selectItem>
						<xp:selectItem itemLabel="すいか" itemValue="3"></xp:selectItem>
						<xp:eventHandler event="onclick" submit="true" refreshMode="partial">
						</xp:eventHandler>
					</xp:radioGroup>
				</xp:td>
			</xp:tr>
			<xp:tr>
				<xp:td>
					選択 ：&#160;
					<xp:text escape="true" id="radioGroup_Disp">
						<xp:this.value>
							<![CDATA[#{javascript:var val = getComponent("radioGroup").getValue();
switch(val){
	case "1":
	return "りんご";
	break;
	
	case "2":
	return "みかん";
	break;
	
	case "3":
	return "すいか";
	break;

}}]]>
						</xp:this.value>

					</xp:text>
				</xp:td>
			</xp:tr>
		</xp:table>



		<xp:table id="CheckBoxGroupTable">
			<xp:tr>
				<xp:td>
					<xp:checkBoxGroup id="checkBoxGroup">

						<xp:selectItem itemLabel="りんご" itemValue="りんご"></xp:selectItem>
						<xp:selectItem itemLabel="みかん" itemValue="みかん"></xp:selectItem>
						<xp:selectItem itemLabel="すいか" itemValue="すいか"></xp:selectItem>
						
						<xp:eventHandler event="onchange" submit="true"
							refreshMode="partial" refreshId="CheckBoxGroupTable">
							<xp:this.action><![CDATA[#{javascript:var result = "";
var AAA = getComponent("checkBoxGroup").getValue();
for (var i = 0; i < AAA.length; i ++) {
  result += AAA[i];}
getComponent("checkGroup_Disp").setValue(result);
}]]></xp:this.action>
						</xp:eventHandler></xp:checkBoxGroup>
				</xp:td>
			</xp:tr>
			<xp:tr>
				<xp:td>

					選択 ：&#160;
					<xp:text escape="true" id="checkGroup_Disp">




					</xp:text>
				</xp:td>
			</xp:tr>
		</xp:table>
		<xp:br></xp:br></xp:view>





単一のラジオボタン、チェックボックスを作成する場合は、

「ラジオボタン」コントロール、「チェックボックス」コントロールを使用します。

 

いくつかの選択項目の中から1つまたは複数選択する場合は、

「ラジオボタングループ」コントロール、「チェックボックスグループ」コントロールを使用します。

※上記コードはグループのコントロールを使用したものになります。

 

単一のラジオボタン、チェックボックスを複数使用することで

グループと似たような使い方も出来ます。

 

＜単一とグループの違い＞

・単一は1つ1つの項目のプロパティの値を編集することが出来るため、複数使用する際も詳細設定が可能。

・グループはグループ化を行う必要がなく項目の追加が簡単だが、1つ1つの項目の詳細な設定を行えない。

 

＜主なプロパティの値＞

　■ラジオボタン

id 名前
text ラベル
tabindex タブ移動順序
accesskey アクセラレータ
rendered 可視
readonly 読み取り専用
disabled 使用不可
groupName ラジオグループ名
defaultselect デフォルトで選択状態
selectedValue 選択時の値

　■ラジオボタングループ

id 名前
layout レイアウト
style(height) 高さ
style(width) 幅
tabindex タブ移動順序
accesskey アクセラレータ
rendered 可視
readonly 読み取り専用
disabled 使用不可
showReadonlyDisabled 読み取り専用の使用不可のコントロールを表示

　■チェックボックス

id 名前
text ラベル
tabindex タブ移動順序
accesskey アクセラレータ
rendered 可視
readonly 読み取り専用
disabled 使用不可
defaultChecked デフォルトでチェックを入れる
checkedValue チェック時の値
uncheckedValue チェックなしの値

　■チェックボックスグループ

id 名前
layout レイアウト
style(height) 高さ
style(width) 幅
tabindex タブ移動順序
accesskey アクセラレータ
rendered 可視
readonly 読み取り専用
disabled 使用不可
showReadonlyDisabled 読み取り専用の使用不可のコントロールを表示

 

※参照元：https://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPages_%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%AE%E7%B4%B9%E4%BB%8B%EF%BC%9A_%E3%80%8C%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%80%8D%E3%80%8C%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%80%8D%E3%80%81%E3%80%8C%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%80%8D%E3%80%8C%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%80%8D


XPages
mitsuya
July 17, 2018 at 3:59 PM
Rating
0





No comments yetLogin first to comment...