9.3.3　隐藏表单字段

和很多产品订购表单上一样，本教程的表单包含了单独的字段来收集账单信息和配送信息。在很多情况下，这些信息完全相同，因此，如果是这样的话，没必要让访问者把这两个字段都填上。我们经常会在这样的表单上看到一个“Same as billing”复选框，表示两组字段的信息是相同的。然而，如果在不需要配送信息字段的时候完全隐藏它们，岂不是更有用吗（更别说改变其颜色）？使用JavaScript，可以做到这一点。

1.在文本编辑器中打开文件form.html。

我们将扩展在本教程的前两个部分中编写的代码。首先，为带有标签“Same as billing.”的复选框的click事件添加一个函数。该复选框的HTML如下所示：

＜input type="checkbox"name="hideShip"id="hideShip"＞

2.把如下的代码添加到在9.3.2节的步骤4所添加的代码之后，但在脚本末尾（最后一行代码}）；//end ready（））之前。

$（'#hideShip'）.click（function（）{

}）；//end click

由于该复选框有一个ID为hideShip，上面的代码选择它并给click事件添加一个函数。在这个例子中，当复选框选中的时候，我们希望整组字段都消失，而不只是隐藏单个的字段。为了使得这更容易做到，组成配送信息字段的HTML包围在ID为shipping的一个＜div＞标签中：要隐藏这个字段，只需要隐藏该＜div＞标签。

然而，我们仍然只想在复选框选中的时候隐藏这些字段。如果某人再次单击复选框而未选中它，＜div＞标签及其表单字段都应该返回。因此，第一步是搞清楚复选框是否选中。

3.添加如下粗体所示代码：

$（'#hideShip'）.click（function（）{

if（$（this）.attr（'checked'））{

}

}）；//end click

一条简单的条件语句（参见3.1.1节）使得测试复选框的状态并且隐藏或显示表单字段变得很容易。$（this）指向被单击的对象，在这个例子中就是复选框。元素的checked属性使我们能够知道复选框是否选中了。如果选中了，那么这个属性返回true；否则，它返回false。要完成这段代码，只需要添加隐藏和显示表单字段的步骤。

4.把如下粗体所示的代码（第16～18行）添加到脚本中。完成后的脚本如下所示：

1＜script＞

2$（document）.ready（function（）{

3$（'：text：first'）.focus（）；

4$（'#paypal'）.click（function（）{

5$（'#creditCard input'）.attr（'disabled'，true）8

6.css（'backgroundColor'，’#CCC'）；

7$（'#creditCard label'）.css（'color'，’#BBB'）；

8}）；//end click

9$（'#visa，#mastercard'）.click（function（）{

10$（'#creditCard input'）.attr（'disabled'，false）8

11.css（'backgroundColor'，’'）；

12$（'#creditCard label'）.css（'color'，’'）；

13}）；//end click

14$（'#hideShip'）.click（function（）{

15 if（$（this）.attr（'checked'））{

16$（'#shipping'）.slideUp（'fast'）；

17}else{

18$（'#shipping'）.slideDown（'fast'）；

19}

20}）；//end click

21}）；//end ready（）

22＜/script＞

$（'#shipping'）引用了带有表单字段的＜div＞标签，而slideUp（）和slideDown（）函数（参见6.1.3节的介绍）通过将＜div＞标签向上滑出视线或者向下滑入视线来隐藏和显示它。你可以尝试一些其他的jQuery效果，例如fadeIn（）和fadeOut（），或者，甚至可以使用animate（）函数（参见本书6.3节）来创建自己的定制动画。

这个教程的完整版本complete_form.html位于chapter09目录下。如果你的版本不能够工作，将自己的代码和完成的教程比较一下，或者参考1.6节介绍的排错步骤。