如何将jquery应用于此Web表单？

Question

我刚开始使用Jquery-发现它很酷很容易。我有一个小项目，我想应用jquery，但我的代码刚刚变得丑陋和长，所以我正在寻求以下帮助：

此表单的加载我想隐藏所有子部分，然后当您从类型下拉列表中选择传单时，传单字段集部分应该出现。当您从类型下拉列表中选择横幅时，应显示横幅字段集部分，其他所有部分都会消失。

现在位于横幅 * 字段集 *中，如果您选择“尺寸1 ”复选框，则尺寸1 - 应显示详细信息字段集，依此类推。

有人能告诉我用jquery完成这个最干净，最有效的方法吗？

<form action="" method="post">
<fieldset name="fs_mainInfo">
                <legend>Main Info</legend>

                <table style="width: 100%">
                    <tr>
                        <td style="width: 255px"><label id="Label1">First Name</label></td>
                        <td><input id="fname" name="fname" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="width: 255px">Last Name</td>
                        <td><input id="lname" name="lname" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="width: 255px"><label id="Label2">Type</label></td>
                        <td><select id="jobType" name="jobType">
                        <option value="Flyer">Flyer</option>
                        <option value="Banner">Banner</option>
                        <option value="Postcard">Postcard</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td style="width: 255px">&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>

            </fieldset>
            <fieldset name="fs_flyer" id="fs_flyer">
                <legend style="color:blue">Flyer</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="Label1">Sizes:</label></td>
                        <td><input id="flyerSize[]" name="flyerSize[]" type="checkbox" value="Size 1" />Size 1<br/>
                        <input id="flyerSize[]"  name="flyerSize[]" type="checkbox" value="Size 2"  />Size 2<br/>
                        <input id="flyerSize[]"  name="flyerSize[]" type="checkbox" value="Size 3"  />Size 3<br/>
                                                </td>
                    </tr>
                </table>

            </fieldset>
<fieldset name="fs_banner" id="fs_banner">
                <legend   style="color:blue">Banner</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblBannerSize">Sizes:</label></td>
                        <td><input id="bannerSize[]" name="bannerSize[]" type="checkbox" value="Size 1" />Size 1<br/>
                        <input id="bannerSize[]"  name="bannerSize[]" type="checkbox" value="Size 2"  />Size 2<br/>
                        <input id="bannerSize[]"  name="bannerSize[]" type="checkbox" value="Size 3"  />Size 3<br/>
                                                </td>
                    </tr>
                </table>

            </fieldset>

<fieldset name="fs_postcard" id="fs_postcard">
                <legend  style="color:blue">Postcard</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblPostcardSize">Sizes:</label></td>
                        <td><input id="postcardSize[]" name="postcardSize[]" type="checkbox" value="Size 1" />Size 1<br/>
                        <input id="postcardSize[]"  name="postcardSize[]" type="checkbox" value="Size 2"  />Size 2<br/>
                        <input id="postcardSize[]"  name="postcardSize[]" type="checkbox" value="Size 3"  />Size 3<br/>
                                                </td>
                    </tr>
                </table>

            </fieldset>

<fieldset name="fs_flyer_desc1" id="fs_flyer_desc1">
                <legend  style="color:maroon">Size 1 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription">Description:</label></td>
                        <td><textarea name="TextArea1" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>
            <fieldset name="fs_flyer_desc2" id="fs_flyer_desc2">
                <legend  style="color:maroon">Size 2 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription2">Description:</label></td>
                        <td><textarea name="sizeOneDesc2" id="sizeOneDesc2" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>
            <fieldset name="fs_flyer_desc3" id="fs_flyer_desc3">
                <legend style="color:maroon">Size 3 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription3">Description:</label></td>
                        <td><textarea name="sizeOneDesc3" id="sizeOneDesc3" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>
</form>

Answer 1

稍微更改标记以使其包含更多元数据，我已经模拟了对您的问题的快速回答。

首先，我将类fs-size和fs-type添加到包含有关大小和类型的字段的字段集中。它允许您在CSS选择器中快速引用它们 - 例如$('.fs-size').hide()

然后，我更改了<input/>和<select/>元素中的值以反映您使用的实际值（value="1"而不是value="Size 1"将节省我们解析的必要性当我们需要使用所选值来选择要显示的<fieldset/>时。

<form action="" method="post">
<fieldset name="fs_mainInfo">
                <legend>Main Info</legend>

                <table style="width: 100%">
                    <tr>
                        <td style="width: 255px"><label id="Label1">First Name</label></td>
                        <td><input id="fname" name="fname" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="width: 255px">Last Name</td>
                        <td><input id="lname" name="lname" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="width: 255px"><label id="Label2">Type</label></td>
                        <td><select id="jobType" name="jobType">
                        <option value="flyer">Flyer</option>
                        <option value="banner">Banner</option>
                        <option value="postcard">Postcard</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td style="width: 255px">&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>

            </fieldset>
            <fieldset name="fs_flyer" id="fs_flyer" class="fs-type">
                <legend style="color:blue">Flyer</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="Label1">Sizes:</label></td>
                        <td><input id="flyerSize[]" name="flyerSize[]" type="checkbox" value="1"   class="input-size"/>Size 1<br/>
                        <input id="flyerSize[]"  name="flyerSize[]" type="checkbox" value="2"   class="input-size" />Size 2<br/>
                        <input id="flyerSize[]"  name="flyerSize[]" type="checkbox" value="3"   class="input-size" />Size 3<br/>
                                                </td>
                    </tr>
                </table>

            </fieldset>
<fieldset name="fs_banner" id="fs_banner" class="fs-type">
                <legend   style="color:blue">Banner</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblBannerSize">Sizes:</label></td>
                        <td><input id="bannerSize[]" name="bannerSize[]" type="checkbox" value="1"  class="input-size" />Size 1<br/>
                        <input id="bannerSize[]"  name="bannerSize[]" type="checkbox" value="2"  class="input-size" />Size 2<br/>
                        <input id="bannerSize[]"  name="bannerSize[]" type="checkbox" value="3" class="input-size" />Size 3<br/>
                                                </td>
                    </tr>
                </table>

            </fieldset>

<fieldset name="fs_postcard" id="fs_postcard" class="fs-type">
                <legend  style="color:blue">Postcard</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblPostcardSize">Sizes:</label></td>
                        <td><input id="postcardSize[]" name="postcardSize[]" type="checkbox" value="1" class="input-size"/>Size 1<br/>
                        <input id="postcardSize[]"  name="postcardSize[]" type="checkbox" value="2"   class="input-size"/>Size 2<br/>
                        <input id="postcardSize[]"  name="postcardSize[]" type="checkbox" value="3"  class="input-size" />Size 3<br/>
                                                </td>
                    </tr>
                </table>

            </fieldset>

<fieldset name="fs_flyer_desc1" id="fs_flyer_desc1"  class="fs-size">
                <legend  style="color:maroon">Size 1 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription">Description:</label></td>
                        <td><textarea name="TextArea1" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>
            <fieldset name="fs_flyer_desc2" id="fs_flyer_desc2"  class="fs-size">
                <legend  style="color:maroon">Size 2 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription2">Description:</label></td>
                        <td><textarea name="sizeOneDesc2" id="sizeOneDesc2" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>
            <fieldset name="fs_flyer_desc3" id="fs_flyer_desc3"  class="fs-size">
                <legend style="color:maroon">Size 3 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription3">Description:</label></td>
                        <td><textarea name="sizeOneDesc3" id="sizeOneDesc3" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>
</form>​​​​​​​​​

然后代码变得非常简单，除了我评论的位。

$('#jobType').change(function() {
    $('.fs-type').hide();
    $('#fs_' + this.value).show();

    // this was a bit tricky for me at first
    // hide all sizes and show only sizes previously selected
    // for this type
    $('.fs-size').hide();
    $('#fs_' + this.value + ' .input-size:checked').each(function(i, el) {
        $('#fs_flyer_desc' + el.value).show();
    });
});
$('.input-size').change(function() {
    var el = $('#fs_flyer_desc' + this.value);
    if (this.checked) {
      el.show();    
    }
    else {
      el.hide();    
    }
});
$('#jobType').change();
$('.fs-size').hide();
​

代码最初隐藏所有字段（倒数第二行调用change事件来实现此目的，仅显示默认选定选项），然后仅显示所选内容。

此注释位检查在相应.fs-type字段集中选中的复选框，并重置相应显示的.fs-size字段集。

我会添加评论，因为三个.fs-type字段集之间唯一不同的是标题，您只能有一个字段集，只需更改标题，例如

$('#jobType').change(function() { $('.fs-type legend').html($(this).html()); });

所有代码（上面的最后一行除外）都是小提琴：http://jsfiddle.net/YC7Xe/

修改：我在此处添加了我最后评论的演示：http://jsfiddle.net/YC7Xe/1/。它还声明了两个函数updateType()和updateSize()，以减少代码重复。

Answer 2

尝试这个。

$(document).ready(function(){

 $("#jobType").change(function() {

      $("#fs_flyer, #fs_banner, #fs_postcard").hide();

       if ( $("#jobType").val() == "Flyer") {
           $("#fs_flyer").show();               

        } else if ( $("#jobType").val() == "Banner") {
              $("#fs_banner").show();

        }  else if ( $("#jobType").val() == "Postcard") {
              $("#fs_postcard").show();

        }      
 });
});