全選

選中一個(gè)

我胡漢三又回來(lái)了，有幾天沒(méi)更新了吧，慚愧！
昨天到今天終于把購(gòu)物車啃出來(lái)了，不容易啊。現(xiàn)在想想也不是挺難嘛，為何還看了那么久。是不是有點(diǎn)馬后炮，哈哈。怎么說(shuō)呢，購(gòu)物車需要寫的jquery挺多的，一開(kāi)始看到那么多久頭疼。

因?yàn)槔锩嬗械墓δ苁侵貜?fù)的，所以把重復(fù)的內(nèi)容拿出來(lái)放到函數(shù)里，需要用到時(shí)在調(diào)用他。全選，圖片前面的小框其實(shí)是圖片，選中的時(shí)候就換成選中的圖片。我一開(kāi)始還以為這是一個(gè)復(fù)選框呢。不過(guò)，這樣也更容易實(shí)現(xiàn)，挺佩服站長(zhǎng)的。

選中圖片時(shí)，小框圖片換成選中的圖片，當(dāng)前行改變背景色，下面的結(jié)算按鈕背景也換成紅色，還要判斷是不是所有行的圖片都選中了，如果選中了就把全選換成選中。所以，在這個(gè)事件里，要調(diào)用的三個(gè)函數(shù)，分別實(shí)現(xiàn)這些。

<script>
$("img.cartProductItemIfSelected").click(function(){
      var selectit =  $(this).attr("selectit");
      if("selectit" == selectit){
        $(this).parents("tr.trInfo").css("background-color" , "white");
        $(this).attr("src" , "http://how2j.cn/tmall/img/site/cartNotSelected.png");
        $(this).attr("selectit" , "false");
      }
      else{
        $(this).parents("tr.trInfo").css("background-color" , "#FFF8E1");
        $(this).attr("src" , "http://how2j.cn/tmall/img/site/cartSelected.png");
        $(this).attr("selectit" , "selectit");
      }
       checkAll();
       accountNumber();
       accountBotton();
      });
</script>

當(dāng)鼠標(biāo)點(diǎn)擊小方框時(shí)，取出當(dāng)前元素的selectit,這個(gè)元素屬性是自定義的，初始化為false，
當(dāng)selectit為false時(shí)代表未選中，為selectit時(shí)代表選中。然后就判斷selectit是否為selectit如果相等，就把背景色改成和原來(lái)一樣，圖片改成未選中，并且把selectit改為false.如果是false,把背景色改成黃色，圖片改成選中。改變背景色，這里用的是$(this).parents("tr.trInfo").css();代表的是當(dāng)前元素的tr.trInfo這個(gè)父元素，如果parents("tr.trInfo")括號(hào)為空，則默認(rèn)為他的所有父元素。

現(xiàn)在就是調(diào)用其他函數(shù)了，先調(diào)用checkAll()這個(gè)函數(shù)，代表全選是否打開(kāi)，代碼如下。

 function checkAll(){
    var selectAll = true;
    $("img.cartProductItemIfSelected").each(function(){
        if ("false" == $(this).attr("selectit"))
              selectAll = false;
    });
     if (selectAll){
        $("img.selectAllItem").attr("src" , "http://how2j.cn/tmall/img/site/cartSelected.png");
     }
     else{
        $("img.selectAllItem").attr("src" , "http://how2j.cn/tmall/img/site/cartNotSelected.png" );
     }
   }

先遍歷每行小方框，把每個(gè)小方框的selectit屬性都拿來(lái)和false比較，判斷是否有沒(méi)有被選中的，只要有一個(gè)未被選中，就把變量selectAll設(shè)為假，然后就判斷變量。如果為真 ，就把全選改為選中，為假則相反。

接下來(lái)就是** accountNumber();**這個(gè)函數(shù)了，這個(gè)函數(shù)是把結(jié)算那里的價(jià)格改成選中的價(jià)格。代碼如下

     function accountNumber(){
        var sum = 0;
        var totalNum = 0;
     $("img.cartProductItemIfSelected[selectit = 'selectit']").each(function(){
      var oiid =    $(this).attr("oiid");
      var price = $("span.priceMoney[oiid = "+oiid+"]").text();
      price = price.replace(/,/g , "");
      price = price.replace(/￥/g , "");
      sum += new Number(price);
      var ShuRu = $("input.inputSee[oiid = "+oiid+"]").val();
      totalNum += new Number(ShuRu);
       });
      $("span.JiaGe1").html("￥" + formatMoney(sum));
      $("span.JiaGe2").html("￥" + formatMoney(sum));
      $("JianShu").html(totalNum);
    }

** $("img.cartProductItemIfSelected[selectit = 'selectit']").each(function()這句代碼，代表遍歷選中的小方框，oiid也是自定義的屬性，然后獲取當(dāng)前元素屬性oiid的值，在金額那里也設(shè)了這個(gè)屬相，并且和當(dāng)前行相等，每一行的oiid**值都不一樣，這樣才好找每一行的金額。

** var price = $("span.priceMoney[oiid = "+oiid+"]").text();** 這樣就是找和當(dāng)前元素oiid值一樣的金額，并把金額里的文本內(nèi)容取出來(lái)。因?yàn)榻痤~里面有￥和,這兩個(gè)符號(hào)，所以就用replace這個(gè)函數(shù)去掉，然后把取出來(lái)的金額相加，還有下面有一個(gè)件數(shù)，再把件數(shù)取出來(lái)相加。最后改變結(jié)算按鈕前面文本內(nèi)容為相加后的金額，件數(shù)。

最后調(diào)用** accountBotton();**函數(shù)，這個(gè)函數(shù)是改變按鈕背景色以及解除禁用。代碼如下。

function accountBotton(){
     var buttonAll = false;
     $("img.cartProductItemIfSelected").each(function(){
        if ("selectit" == $(this).attr("selectit")){
            buttonAll = true;
        }
        
     });
     if (buttonAll){
         $("button.button1").css("background-color" , "#C40000");
         $("button.button1").removeAttr("disabled");
        }
     else{
        $("button.button1").css("background-color" , "#AAAAAA");
        $("button.button1").attr("disabled" , "disabled");
        
     }
   }

 }); 

改變背景色，遍歷小方框。如果小方框有一個(gè)選中了，就改變按鈕的背景色，并解除禁用。disabled屬性是禁用按鈕，也就無(wú)法鼠標(biāo)點(diǎn)擊按鈕，沒(méi)選中就相反。

下面就是鍵盤按下輸入框事件發(fā)生的 事了，代碼如下。

 $("input.inputSee").keyup(function(){
        var pid = $(this).attr("pid");
        var XianZhi = $("span.XianZhi[pid = "+pid+"]").text();
        var price = $("span.spanShu[pid = "+pid+"]").text();
        var num = $("input.inputSee[pid = "+pid+"]").val();
        num = parseInt(num);
        if (isNaN(num))
            num = 1;
        if (num > XianZhi)
            num = XianZhi;
        if (num <= 0)
            num = 1;
        synPrice(pid , price , num);
      });

pid也是自定義的屬性，和oiid差不多主要是找到一行的數(shù)據(jù)紐帶。XianZhi
這個(gè)標(biāo)簽是庫(kù)存， 也就是最大值。和spanShu這兩個(gè)標(biāo)簽是隱藏的，設(shè)這兩個(gè)標(biāo)簽主要是取值方便。取出輸入框的值，不能是字符不能超過(guò)庫(kù)存和小于0，然首把取到的值放到下面的函數(shù)，代碼如下。

function synPrice(pid, price , num){
        $("input.inputSee[pid = "+pid+"]").val(num);
        var totalNum = formatMoney(price * num);
        $("span.priceMoney[pid = "+pid+"]").html("￥" + totalNum);
        accountNumber();

     }

把輸入框和pid值相等的寫入修改好的值，再把金額那里的內(nèi)容修改成增加后的值。

  $("a.aTop").click(function(){
        var pid = $(this).attr("pid");
        var XianZhi =  $("span.XianZhi[pid = "+pid+"]").text();
        var price = $("span.spanShu[pid = "+pid+"]").text();
        var num = $("input.inputSee[pid ="+pid+"]").val();
        num--;
        if (num <= 0)
            num = 1;
        synPrice(pid , price , num);
      });

 $("a.aDown").click(function(){
        var pid = $(this).attr("pid");
        var XianZhi =  $("span.XianZhi[pid = "+pid+"]").text();
        var price = $("span.spanShu[pid = "+pid+"]").text();
        var num = $("input.inputSee[pid ="+pid+"]").val();
        num++;
        if (num > XianZhi)
            num = XianZhi;
        synPrice(pid , price , num);
      });

上面兩個(gè)事件，分別是點(diǎn)擊+和-后發(fā)生的事，比較簡(jiǎn)單。下面的是把金額修改成千為表示法，也就是在千位后加分號(hào)。

function formatMoney(num){
    num = num.toString().replace(/\$|\,/g,'');  
    if(isNaN(num))  
        num = "0";  
    sign = (num == (num = Math.abs(num)));  
    num = Math.floor(num*100+0.50000000001);  
    cents = num%100;  
    num = Math.floor(num/100).toString();  
    if(cents<10)  
    cents = "0" + cents;  
    for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)  
    num = num.substring(0,num.length-(4*i+3))+','+  
    num.substring(num.length-(4*i+3));  
    return (((sign)?'':'-') + num + '.' + cents);  
}