要實(shí)現(xiàn)的效果
如下圖所示，當(dāng)點(diǎn)擊li元素的時(shí)候，實(shí)現(xiàn)左側(cè)checkbox的選中和取消，并且監(jiān)測(cè)選中訂單的數(shù)量和金額變化，將數(shù)據(jù)實(shí)時(shí)綁定到下方的“選擇訂單”和“金額”上面。

1.png

dom結(jié)構(gòu)
strVar += "<li class="mui-table-view-cell" data-flag = "0" onclick="onListClick(this)">";
strVar += "<a class="mui-navigate-right">";
strVar += "<div class="mui-checkbox mui-pull-left checkboxArea">";
strVar += "<input name="checkbox" value="" type="checkbox" data='"+JSON.stringify(temp)+"'>";
strVar += "</div>";
strVar += "<div class="mui-pull-right tixianInfo" >";
strVar += "<p class="orderByInfo mui-clearfix">";
strVar += "<span class="orderByName mui-pull-left">"+temp.ShareClientName+"</span>";
strVar += "<span class="orderTime mui-pull-right">"+temp.AddTime.split(' ')[0]+"</span>";
strVar += "</p>";
strVar += "<p class="proInfo">";
strVar += "<span class="ProName">"+temp.ProName+"</span>";
strVar += "<span class="proPrice">￥"+temp.TrueTotal+"</span>";
strVar += "<span class="proCount">x"+temp.Number+"</span>";
strVar += "</p>";
strVar += "<p class="orderTiCheng">此訂單獲得提成:￥"+temp.Money+"</p>";
strVar += "</div>";
strVar += "</a>";
strVar += "</li>";

js部分
//observeChange用來(lái)監(jiān)測(cè)checkbox的change事件，并進(jìn)行邏輯處理
function observeChange(){
var list = document.getElementById('list');
//監(jiān)測(cè)所有inputcheckbox)的變化
mui('#list').on('change','input',function(){
//選中的checkbox的數(shù)量
var checkedbox = list.querySelectorAll('input[type="checkbox"]:checked');
var count = checkedbox.length;
//將選中的checkbox的數(shù)量賦值給底部的選擇訂單
orderCount.innerHTML = count;//orderCount即為'選擇訂單'

         var totalMoney = 0;
         //該數(shù)組用來(lái)存儲(chǔ)選中訂單的訂單號(hào)
         SelectIDSArray = [];
         for(var i = 0;i<checkedbox.length;i++){
             var item = checkedbox[i];
             //item是通過(guò)ajax從后臺(tái)請(qǐng)求的訂單數(shù)據(jù)，該數(shù)據(jù)為JSON數(shù)據(jù)。
             var obj = JSON.parse(item.getAttribute('data'));
     
             //將選中的訂單ID存儲(chǔ)起來(lái)
             SelectIDSArray.push(obj.OrderNum);
             totalMoney += parseFloat(obj.Money);
         }
         tixianMoney.innerHTML = '￥'+totalMoney.toFixed(2);      
      });
 }
 
 //onListClick用來(lái)手動(dòng)觸發(fā)checkbox的change事件，切換checkbox的選中和取消
 function onListClick(obj){
     var flag = obj.getAttribute('data-flag');
     if(flag == 0){
         $(obj).find('input')[0].checked = true;
         obj.setAttribute('data-flag',1);
 
         $($(obj).find('input')[0]).trigger('change');
     }else{
         $(obj).find('input')[0].checked = false;
         obj.setAttribute('data-flag',0);
         $($(obj).find('input')[0]).trigger('change');
     }
 }