要实现的效果
如下图所示，当点击li元素的时候，实现左侧checkbox的选中和取消，并且监测选中订单的数量和金额变化，将数据实时绑定到下方的“选择订单”和“金额”上面。

1.png

dom结构
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用来监测checkbox的change事件，并进行逻辑处理
function observeChange(){
var list = document.getElementById('list');
//监测所有inputcheckbox)的变化
mui('#list').on('change','input',function(){
//选中的checkbox的数量
var checkedbox = list.querySelectorAll('input[type="checkbox"]:checked');
var count = checkedbox.length;
//将选中的checkbox的数量赋值给底部的选择订单
orderCount.innerHTML = count;//orderCount即为'选择订单'

         var totalMoney = 0;
         //该数组用来存储选中订单的订单号
         SelectIDSArray = [];
         for(var i = 0;i<checkedbox.length;i++){
             var item = checkedbox[i];
             //item是通过ajax从后台请求的订单数据，该数据为JSON数据。
             var obj = JSON.parse(item.getAttribute('data'));
     
             //将选中的订单ID存储起来
             SelectIDSArray.push(obj.OrderNum);
             totalMoney += parseFloat(obj.Money);
         }
         tixianMoney.innerHTML = '￥'+totalMoney.toFixed(2);      
      });
 }
 
 //onListClick用来手动触发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');
     }
 }