jquery開合表單

2011-12-23

2549
0
jquery

摘要:jquery開合表單

<HTML>
<HEAD>
<style type="text/css">

</style>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$(function(){
   $(".3form").hide();
   $(".req").hide();

   $(".chk").click(function(){//當要發票時，勾選時顯示填寫欄位區塊
        $(".req").slideToggle($(".req:visible").length>0);
   });

   $(".chk2").click(function(){
        var id=$(this).val(); //取得radio中的值
        if(id == 3){ //當取回的來值為3時, 就顯示三欄式發票所需的欄位區塊
            $(".3form").slideDown();
        }else{
            $(".3form").slideUp();
        }

   });
});


});
</script>
</HEAD>
<BODY>
<b>需要發票：</b>
<input type="checkbox" name="buyInvoice" class="chk" />
是   (如無勾選將發票捐給慈善團體。)
<div class="req">
<label>
<input name="radio" type="radio" id="type" value="2" checked="checked" class="chk2"/>
二聯</label>
<label>
<input type="radio" name="radio" id="type2" value="3" class="chk2"/>
三聯</label>
<div class="form">
    <div class="3form" style="margin:7px 0;">
      <table bgcolor="#eeeeee">
        <tr>
          <td width="65">發票抬頭：</td>
          <td width="369"><input type="text" name="txtftitle" id="textfield5" /></td>
        </tr>
        <tr>
          <td>統一編號：</td>
          <td><input type="text" name="txtfidnum" id="textfield6" /></td>
        </tr>
      </table>
    </div>
    <table>
      <tr>
        <td width="76">收件人姓名：</td>
        <td width="358"><input type="text" name="txtfname" id="textfield" /></td>
      </tr>
      <tr>
        <td>收件人電話：</td>
        <td><input type="text" name="txtftel" id="textfield2" /></td>
      </tr>
      <tr>
        <td>收件人地址：</td>
        <td><input type="text" name="txtfaddress" id="textfield3" /></td>
      </tr>
      <tr>
        <td>備註事項：</td>
        <td><textarea name="txtfps" id="textfield4"></textarea></td>
      </tr>
    </table>
</div>
</div>
</BODY>
</HTML>

回首頁