1

我有 2 个单选按钮，分别代表美国和加拿大。如果我选择 USA 单选按钮，我想要一个 div 标签来显示 Address1、Address2、Country、State、Email 和 2 个复选框，其中一个将提供选择电子邮件新闻信函的选项，另一个是选择 Twitter 更新的选项。

如果我选择 CANADA 单选按钮，我想要一个带有地址 1、州和电子邮件的 div 标签以及一个用于电子邮件新闻信函的复选框。注意：这里我不想要地址 2、县文本框和 Twitter 复选框。

用户填写所需信息后；我想使用 spring:bind 将所有这些值包括选定的国家无线电值捕获到 myRegistrationForm.address 中（地址是一个复杂的对象，具有地址 1、地址 2、县、州、电子邮件和国家字符串属性以及 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');
    });
 });​
4

0 回答 0