<?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:table> <xp:tr> <xp:td> <xp:radioGroup id="radioGroup1" defaultValue="1"> <xp:selectItem itemLabel="法人" itemValue="1"></xp:selectItem> <xp:selectItem itemLabel="個人" itemValue="2"></xp:selectItem> <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="readCheck"> </xp:eventHandler> </xp:radioGroup> </xp:td> </xp:tr> </xp:table> <xp:table id="readCheck"> <xp:tr style="heigh:10px"> <xp:this.rendered><![CDATA[#{javascript:var val = getComponent("radioGroup1").getValue(); if(val == "1"){ return true; } return false;}]]></xp:this.rendered> <xp:td>会社名</xp:td> <xp:td>：</xp:td> <xp:td> <xp:inputText id="inputText1"> </xp:inputText> </xp:td> </xp:tr> <xp:tr> <xp:td>氏名</xp:td> <xp:td>：</xp:td> <xp:td> <xp:inputText id="inputText2"></xp:inputText> </xp:td> </xp:tr> <xp:tr> <xp:td>電話番号</xp:td> <xp:td>：</xp:td> <xp:td> <xp:inputText id="inputText3"></xp:inputText> </xp:td> </xp:tr> </xp:table> </xp:view>
ラジオボタンで選択肢を変更すると、その動作に合わせて特定の入力フォームが有効/無効(表示/非表示)となるコードです。
1.選択肢となるラジオボタングループを作成する
<xp:radioGroup id="radioGroup1" defaultValue="1"> <xp:selectItem itemLabel="法人" itemValue="1"></xp:selectItem> <xp:selectItem itemLabel="個人" itemValue="2"></xp:selectItem> <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="readCheck"> </xp:eventHandler> </xp:radioGroup>
2.ラジオボタングループのonclickイベントのサーバーオプションを変更する。(サンプルコードは部分更新です)
3.入力フォームを作成する
4.選択肢が変更されることにより、有効/無効(表示/非表示)となる表の行のレンダリングに以下のコードを入力する(値の計算に入力)
var val = getComponent("radioGroup1").getValue(); if(val == "1"){ return true; } return false;
※ポイント※
var val = getComponent("ラジオボックスグループの名前").getValue();
上記で変数valに選択されたラジオボックスグループの項目がセットされるようになります。
この際取得される値はitemLabelではなくitemValueとなるため、val == "1"という比較演算となります。