在某论坛上看到有人问说..在HTML表单中，如何做到点选CheckBox后，就显示出进阶的表单让使用者填写。
其实这只是JavaScript+CSS的一点小应用而已，废话不多说，先来看下列的Code：
在Body里面我放了一个Form，又用了Div来把表单切成两部份：
一部份是姓名跟信箱的登打栏杆；另一部份是电话跟地址的登打栏杆，这一部份也就是做为我们进阶表单的栏位。我放了一个进阶选项的CheckBox，在它被Click时，会触发show()这个方法。
让我们先来看这两个Div除了id以外到底有什么不一样的地方，不知道你们发现了没，我在第二个Div里面加了一段style="display:none"，这一段就是我们今天的主角。
display这个性质可设定整个元件要不要显示，以及显示的方式。它可用的参数这里一一介绍。none代表不显示，且此元件不占任何空间。block代表显示，并视为区块，前后紧临的元件将换行显示。inline代表显示，但前后紧临的元件会排在其左右，并不会换行。list-item代表显示，与block大致相同。table-header-group只能用在，代表表格在多页时（如列印），此区之表格将会自动加在有此表格之页面的第一列。table-header-group与table-footer-group相似，但用于，作用是表格在多页时，此区之表格将会自动加在有此表格之页面的最末列。所以使用如display:none表示此元件就被隐藏了。
既然知道怎样隐藏跟显示，再来的就简单多了。我们来看当勾选了进阶选项的CheckBox后，所触发的方法。
当触发onClick时，会把CheckBox本身的参考一起传给show()这个方法，这样我们才比较好得知到底是有没有勾选了进阶选项这个CheckBox。当CheckBox的checked值为true时，表示被勾选了，s2这个Div要显示出来让使用者填写；为false时，表示未被勾选，所以s2这个Div要隐藏起来。
相信在了解display的用法后，这一小段的Javascript应该是难不倒你们。
范例浏览：
http://abgne.myweb.hinet...0001.html以上内容于2005/08/30发表在小弟的Blog里
http://blog.xuite.net/abgne/diary1/3847951
