USA と CANADA を表す 2 つのラジオ ボタンがあります。USA ラジオ ボタンを選択した場合、div タグに Address1、Address2、County、State、Email、および 2 つのチェック ボックスを表示する必要がありました。1 つは電子メールのニュース レターを選択するオプションで、もう 1 つは Twitter の更新を選択するオプションです。
また、CANADA ラジオ ボタンを選択すると、住所 1、都道府県、電子メールの div タグと、電子メール ニュース レター用の 1 つのチェック ボックスが必要でした。注: ここでは、住所 2、郡のテキスト ボックス、および Twitter のチェックボックスは必要ありません。
ユーザーが必要な情報を入力したら、spring:bind を使用して、選択した国のラジオの値を含むすべての値を myRegistrationForm.address (アドレスは、address1、address 2、county、state、email、country の String プロパティと emailNewsLetter、twitterUpdates ブール プロパティを持つ複雑なオブジェクトです) にキャプチャしたいと考えました。
これが私が達成しようとしているサンプルスニペットです。助けてくれてありがとう。
<td>
<spring:bind path="registerForm.address">
<input type="radio" name="country" value="USA" <c:if test='${status.value == "USA"}'>checked</c:if>> USA
<!-- If above radio is selected I need dynamic div table with some textboxes and 2 check boxes and needs to be captured -->
<c:if test='${status.value == "USA"}'>
<div id="address-usa">
Address 1: <input type="text" name="addressOne"/>
Address 2: <input type="text" name="addressTwo"/>
County: <input type="text" name="county"/>
State: <input type="text" name="state"/>
Email: <input type="email" name="email"/>
<input type="checkbox" value="NEWSLETTER">E-Mail News Letter
<input type="checkbox" value="twitter">Twitter Updates
</div>
</c:if>
<input type="radio" name="country" value="CANADA" <c:if test='${status.value == "CANADA"}'>checked</c:if>> CANADA
<c:if test='${status.value == "CANADA"}'>
<div id="address-canada">
Address 1: <input type="text" name="addressOne"/>
<!-- Note I dont need address 2 and county for canada -->
State: <input type="text" name="state"/>
Email: <input type="email" name="email"/>
<input type="checkbox" value="NEWSLETTER">E-Mail News Letter
<!-- No twitter updates for canada customers -->
</div>
</c:if>
</spring:bind>
</td>
より正確に言うと、次のようにラップされた html/jsp コードを怒鳴りつけたかった<spring:nestedPath/> <spring:bind> <c:foreach> <c:if>
http://jsfiddle.net/eKFrW/298/を使用して次のコードを実行できます。
<label><input id="rdb1" type="radio" name="toggler" value="1" />USA</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />CANADA</label>
<div id="blk-1" class="toHide" style="display:none">
Address 1: <input type="text" name="addressOne"><br/>
Address 2: <input type="text" name="addressTwo"><br/>
County : <input type="text" name="county"><br/>
Email : <input type="email" name="email"><br/>
E-mail News Letter: <input type="checkbox" name="emailLetter">
Twitter Updates : <input type="checkbox" name="twitterUpdates">
</div>
<div id="blk-2" class="toHide" style="display:none">
Address 1: <input type="text" name="addressOne"><br/>
Email : <input type="email" name="email"><br/>
E-mail News Letter: <input type="checkbox" name="emailLetter">
</div>
関連する Java スクリプト:
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show('slow');
});
});