« UL LI 配合 CSS 製作 Table | トップページ | 非同步處理之.load()試作 »

2010年7月17日 (土)

以jQuery計算已勾選Checkbox的Value總和

這次的案例與前篇一樣,只是分別於「その他」欄下加入checkbox,實現「即時計算勾選checkbox的值」以及「全選checkbox」等基本功能。如果是進行一些線上商店,應會合用。畢竟是初心者,程序未臻完善非戰之罪,還望各位高進指教。不過初手有初手的好處,寫出來的教學至少是方便新丁入門。竊觀不少網上教學,英文官網的太簡單又看不懂,中文的全都是胡亂轉載又或是難度太高,反而日本網站的教學很出色(笑)。有心學習jQuery而又懂日文的朋友可以「越洋求師」。

首先是前台的文本,利用上次的專案再修改,加入checkbox於「その他」欄格中。

  <form>
  <ul id="samtab">
    <li class="samtd1">苗字</li>
    <li class="samtd2">名前</li>
    <li class="samtd3">都道府県</li>
    <li class="samtd4">その他<input type="checkbox" id="all" name="all"/></li>
    <li class="samth1">阿久津</li>
    <li class="samth2">智</li>
    <li class="samth3">北海道</li>
    <li class="samth4">50<input type="checkbox" id="val" name="val" value="50"/></li>
    <li class="samth1">雨ノ宮</li>
    <li class="samth2">アシキ</li>
    <li class="samth3">埼玉県</li>
    <li class="samth4">60<input type="checkbox" id="val" name="val" value="60"/></li>
    <li class="samth1">妃宮</li>
    <li class="samth2">ちはや</li>
    <li class="samth3">奈良県</li>
    <li class="samth4">35<input type="checkbox" id="val" name="val" value="35"/></li>
    <li class="samth1">秋山</li>
    <li class="samth2">みお</li>
    <li class="samth3">東京都</li>
    <li class="samth4">64<input type="checkbox" id="val" name="val" value="64"/></li>
    <li class="samth1">佐々瀬</li>
    <li class="samth2">ささみ</li>
    <li class="samth3">神奈川県</li>
    <li class="samth4">51<input type="checkbox" id="val" name="val" value="51"/></li>
  </ul>
  </form>
  <div>總量:<span id="show"></span></div>

以上源碼很簡單,不作解說。此時我們開始進行最重要的步驟……

  <!--jQuery-->
  <script type="text/javascript" src="lib/jquery/jquery.js"></script>

沒錯,就是錄入jQuery!沒有這一行,一切都是空談(笑)。順帶一提原本也想在本博加入一些jQuery特例,可惜系統後台未設有相應的修改權限,只好徒嘆一聲。

引入jQuery後就可以在頁面加入相應的源碼,由於本教學預設是給「有基本jQuery認知」的初心者,所以一些太基本的函式便不多作介入。

    <script type="text/javascript">
      $(document).ready(function(){
        var total = 0; //初始宣告total總量為0
        $("#show").html(total); //顯示總量

        //全選checkbox變動時更新用
        $("#:input[name=all]").click(function(){
          /*$("#:input[name=val]").each(function(){
            this.checked = 'checked';
          });*/
          $("#:input[name=val]").click();
        var total = 0; //每次勾選checkbox時清空總量
        $("#val:checked").each(function(){
          total += parseInt($(this).val());
        });
          $("#show").html(total);
        });
       
        //checkbox變動用更新
        $("#:input[name=val]").click(function(){
          var total = 0; //每次勾選checkbox時清空總量
          $("#val:checked").each(function(){
          total += parseInt($(this).val());
        });
          $("#show").html(total);
      });
    </script>

很累贅啊!沒錯!早說了小妹是初學者www其實對於計算checkbox總值的函式可以打包變成獨立的function,以後使用時只要呼叫該function即可。不過小妹見本作業不是太複雜,就決定用copy & paste解決。如是者會形成日後維護的困難,但這些小事就別管啦,最重要是程序可以正常執行。

題外,上司說用.each()十分費系統資源,盡量用for函式解決。不過小妹調試整天也失敗,最後心想「反正不是甚麼大專案,偷懶一下也沒差」而照用.each()……

接下來增加難度,有些購物單會同時給予會員/非會員/折扣等選項,如何進階改變數值?個人構思是新增一個隱藏div,使用者展開該版塊後再選擇各種優惠,從而變動總額。反過來,使用者先勾選優惠,再決定項目,同樣會得出「已優惠的價格」。決定思路及源碼方向,就著手改動。

  <form>
  <ul id="samtab">
    <li class="samtd1">苗字</li>
    <li class="samtd2">名前</li>
    <li class="samtd3">都道府県</li>
    <li class="samtd4">その他<input type="checkbox" id="all" name="all"/></li>
    <li class="samth1">阿久津</li>
    <li class="samth2">智</li>
    <li class="samth3">北海道</li>
    <li class="samth4">50<input type="checkbox" id="val" name="val" value="50"/></li>
    <li class="samth1">雨ノ宮</li>
    <li class="samth2">アシキ</li>
    <li class="samth3">埼玉県</li>
    <li class="samth4">60<input type="checkbox" id="val" name="val" value="60"/></li>
    <li class="samth1">妃宮</li>
    <li class="samth2">ちはや</li>
    <li class="samth3">奈良県</li>
    <li class="samth4">35<input type="checkbox" id="val" name="val" value="35"/></li>
    <li class="samth1">秋山</li>
    <li class="samth2">みお</li>
    <li class="samth3">東京都</li>
    <li class="samth4">64<input type="checkbox" id="val" name="val" value="64"/></li>
    <li class="samth1">佐々瀬</li>
    <li class="samth2">ささみ</li>
    <li class="samth3">神奈川県</li>
    <li class="samth4">51<input type="checkbox" id="val" name="val" value="51"/></li>
  </ul>
  </form>
  <div>總量:<span id="show"></span></div>
  <div><input type="checkbox" id="detail" name="detail" />顯示進階選項</div>
  <div id="box">
    <div><stong>總數操作</stong></div>
    <div><input type="radio" id="change" name="change" value="0" checked="checked" />無</div>
    <div><input type="radio" id="change" name="change" value="1" />九折</div>
    <div><input type="radio" id="change" name="change" value="2" />七折</div>
    <div><input type="radio" id="change" name="change" value="3" />扣二十</div>
  </div>

先在前端腳本增加div區塊,我們可以之後利用jQuery操作其顯現與隱藏。

    <script type="text/javascript">
      $(document).ready(function(){
        var total = 0; //初始宣告total總量為0
        $("#show").html(total); //顯示總量
        $("#box").hide(); //隱藏div#box區塊
        $("#detail").click(function(){
          $("#box").toggle("slow"); //切換隱藏內容顯現速度為slow
        });
       
        //全選checkbox變動時更新用
        $("#:input[name=all]").click(function(){
          /*$("#:input[name=val]").each(function(){
            this.checked = 'checked';
          });*/
          $("#:input[name=val]").click();
        var total = 0; //每次勾選checkbox時清空總量
        $("#val:checked").each(function(){
          total += parseInt($(this).val());
        });
        //再執行一次輸出變更原本數值,根據進階設定改變總量
        if($("#change:checked").val() == 1){
          var Ntotal = parseInt(total/100*90);
          $("#show").html(Ntotal);
        }else if($("#change:checked").val() == 2){
          var Ntotal = parseInt(total/100*70);
          $("#show").html(Ntotal);
        }else if($("#change:checked").val() == 3){
          var Ntotal = parseInt(total-20);
          $("#show").html(Ntotal);
        }else{
          $("#show").html(total);
        }
        });
       
        //checkbox變動用更新
        $("#:input[name=val]").click(function(){
          var total = 0; //每次勾選checkbox時清空總量
          $("#val:checked").each(function(){
          total += parseInt($(this).val());
        });
        //再執行一次輸出變更原本數值,根據進階設定改變總量
        if($("#change:checked").val() == 1){
          var Ntotal = parseInt(total/100*90);
          $("#show").html(Ntotal);
        }else if($("#change:checked").val() == 2){
          var Ntotal = parseInt(total/100*70);
          $("#show").html(Ntotal);
        }else if($("#change:checked").val() == 3){
          var Ntotal = parseInt(total-20);
          $("#show").html(Ntotal);
        }else{
          $("#show").html(total);
        }
        });
        //radio變動時更新
        $("#:input[name=change]").change(function(){ //根據進階設定改變總量
        var total = 0; //每次勾選checkbox時清空總量
        $("#val:checked").each(function(){
          total += parseInt($(this).val());
        });
        //再執行一次輸出變更原本數值,根據進階設定改變總量
        if($("#change:checked").val() == 1){
          var Ntotal = parseInt(total/100*90);
          $("#show").html(Ntotal);
        }else if($("#change:checked").val() == 2){
          var Ntotal = parseInt(total/100*70);
          $("#show").html(Ntotal);
        }else if($("#change:checked").val() == 3){
          var Ntotal = parseInt(total-20);
          $("#show").html(Ntotal);
        }else{
          $("#show").html(total);
        }
        });
       
      });
    </script>

這次的源碼較為複雜,但基本原理很簡單。以.hide()隱藏id=box的div區塊,如果發現id=detail的checkbox勾選,就以.toggle()變更.hide()轉為.show(),反之就是.show()轉成.hide()。至於.toggle()設為slow,避免區塊突然冒出的突兀感,乃多手加上去。這裡都是很基本的,底子打得好的朋友應會讀懂。

然後是利用if語法,當發生各種events時,系統重置總值,再計算函式。不同之處是計算時會檢查radio的值,連同折扣價一併計算,如是者大功告成。特別一提是個人習慣,提取物件或DOM時一定指名ID或NAME,而且前台的DIV等全數有ID、NAME或CLASS,方便jQuery執行時不會掉包誤判,算是良好習慣。麻煩是必然,但後續debug或維護會十分方便。

下次……是甚麼?不知道耶,有機會再分享吧。

« UL LI 配合 CSS 製作 Table | トップページ | 非同步處理之.load()試作 »

パソコン・インターネット」カテゴリの記事

コメント

Getting the freedom in our minds is the first step towards achieving the dreams we set. Even in the business world, there are things which the business practitioners ought to free themselves from. It is after we get free that we have our thinking on the issues of life been transformed.

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1263074/35782969

この記事へのトラックバック一覧です: 以jQuery計算已勾選Checkbox的Value總和:

« UL LI 配合 CSS 製作 Table | トップページ | 非同步處理之.load()試作 »

2017年4月
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

Microsoft Silverlight

フォト
無料ブログはココログ

秋山澪@Twitter

秋山澪@新浪微博

秋山澪@Flickr

  • www.flickr.com
    秋山みお 的項目 前往 秋山みお 的所有相片

応援バナーとか

  • Untitledtruecolor05

    神櫻島

    【いきなりあなたに恋している】応援中!

    『your diary』 綾瀬紗雪 応援中!