Javascript, 網頁設計

jQuery教學-判斷Checkbox核選與應用

梅干 2010/11/10
梅問題-jQuery教學-判斷Checkbox核選應用
  最近好友鄧教授,也開始跨足了團購市場,觸腳愈深愈廣了,已從技術人員轉換成鄧董啦!在鄧董的不棄嫌下,找了梅干到幫忙,但梅干沒用過團購平台,對於這平台也是挺陌生滴!好不容易費了九牛二虎之力,把版型給弄完了,但鄧董卻突然說又要加一個發票欄位,點了才出現表單,並且表單還分成二聯、三聯,欄位又不同,這還真是讓梅干上了一課,7-11都不用這麼搞剛,但即然鄧董要求了,梅干只好使命必達,所以就用了jQuery寫了一個小判斷式,來滿足鄧董的需求,為了讓它多一點不一樣的效果,梅干加了一點動態效果,讓表單會滑出滑入,現在梅干就來分享一下CheckBox表單的應用。

放在<head>.....</head>之間:
<script src="https://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買就一起】
[範例預覽]