最近好友鄧教授，也開始跨足了團購市場，觸腳愈深愈廣了，已從技術人員轉換成鄧董啦！在鄧董的不棄嫌下，找了梅干到幫忙，但梅干沒用過團購平台，對於這平台也是挺陌生滴！好不容易費了九牛二虎之力，把版型給弄完了，但鄧董卻突然說又要加一個發票欄位，點了才出現表單，並且表單還分成二聯、三聯，欄位又不同，這還真是讓梅干上了一課，7-11都不用這麼搞剛，但即然鄧董要求了，梅干只好使命必達，所以就用了jQuery寫了一個小判斷式，來滿足鄧董的需求，為了讓它多一點不一樣的效果，梅干加了一點動態效果，讓表單會滑出滑入，現在梅干就來分享一下CheckBox表單的應用。
放在<head>…..</head>之間：
<script src=“http://code.jquery.com/jquery-1.4.3.min.js"></script> <script> $(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>
放在<body>…..</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>
將子就搞定囉！這邊梅干二聯三聯，是先取得radio bottom裡的值來作判斷，當值等於3表示為三聯發票，就秀出三聯發票需填的欄位，將子就可以自由的控制表單欄位囉！而這也要感謝好友男丁，幫梅干調整了一下寫法，讓語法更加的完整，最後也幫好友鄧董工商一下，目前鄧董有推出送電影票的活動，有興趣的朋友也一塊來參觀鄧董的團購網。【Buy917買就一起】
[範例預覽]