window.onload=function(){
??? // if (!document.getElementsByClassName) {
??? //???? document.getElementsByClassName = function (cls) {
??? //???????? var ret = [];
??? //???????? var els = document.getElementsByTagName('*');
??? //???????? for (var i = 0, len = els.length; i < len; i++) {
??? //???????????? if (els[i].className === cls
??? //???????????????? || els[i].className.indexOf(cls + ' ') >= 0
??? //???????????????? || els[i].className.indexOf(' ' + cls + ' ') >= 0
??? //???????????????? || els[i].className.indexOf(' ' + cls) >= 0) {
??? //???????????????? ret.push(els[i]);
??? //???????????? }
??? //???????? }
??? //???????? return ret;
??? //???? }
??? // }
?? ?
??? //獲取對(duì)象
?? ?var cartTable=document.getElementById('cartTable');
?? ?var tr=cartTable.children[1].rows;
?? ?var checkInputs=document.getElementsByClassName('check');
?? ?var checkAllInputs=document.getElementsByClassName('check-all');

?? ?var selectedTotal= document.getElementById('selectedTotal');
?? ?var priceTotal= document.getElementById('priceTotal');
?? ?var selected= document.getElementById('selected');
?? ?var foot= document.getElementById('foot');
?? ?var selectedViewList= document.getElementById('selectedViewList');

?? ?var deleteAll=document.getElementById('deleteAll');

?? ?//函數(shù)：計(jì)算
?? ?function getTotal(){
?? ??? ?var selected=0;
?? ??? ?var price=0;
?? ??? ?var HTMLstr='';
?? ??? ?for (var i=0,len=tr.length;i<len;i++){
?? ??? ??? ?if(tr[i].getElementsByTagName('input')[0].checked){
?? ??? ??? ??? ?tr[i].className='on';
?? ??? ??? ??? ?selected +=parseInt(tr[i].getElementsByTagName('input')[1].value);
?? ??? ??? ??? ?price +=parseFloat(tr[i].cells[4].innerHTML);
?? ??? ??? ??? ?HTMLstr +='<div><img src="'+ tr[i].getElementsByTagName('img')[0].src +'"/><span class="'+'del'+'" index="'+i+'">取消選擇</span></div>';
?? ??? ??? ?}else{
?? ??? ??? ??? ?tr[i].className='';
?? ??? ??? ?}
?? ??? ?}
?? ??? ?selectedTotal.innerHTML=selected;
?? ??? ?priceTotal.innerHTML=price.toFixed(2);
?? ??? ?selectedViewList.innerHTML=HTMLstr;

?? ??? ?if(selected==0){
?? ??? ??? ?foot.className='foot';
?? ??? ?}
?? ?}

?? ?//函數(shù)：小計(jì)
?? ?function getSubTotal(tr){
?? ??? ?var tds=tr.cells;
?? ??? ?var price=parseFloat(tds[2].innerHTML);
?? ??? ?var count=parseInt(tr.getElementsByTagName('input')[1].value);
?? ??? ?var SubTotal=parseFloat(price * count);
?? ??? ?tds[4].innerHTML=SubTotal.toFixed(2);
?? ?}

?? ?//以下for循環(huán)為所有的勾選框，添加單擊事件
?? ?for (var i = 0, len=checkInputs.length; i<len; i++) {
?? ??? ?checkInputs[i].onclick=function(){
?? ??? ??? ?if(this.className==='check-all check'){
?? ??? ??? ??? ?for(var j=0;j<checkInputs.length;j++){?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?checkInputs[j].checked=this.checked;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?if (this.checked==false){
?? ??? ??? ??? ?for(var k=0;k<checkAllInputs.length;k++){
?? ??? ??? ??? ??? ?checkAllInputs[k].checked=false;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?getTotal();
?? ??? ?}
?? ?};?? ?
?? ?
?? ?//單擊事件：以下為已選商品單擊時(shí)，是否顯示選中的圖片;
?? ?selected.onclick=function(){
?? ??? ?if (foot.className=="foot"){
?? ??? ??? ? if (selectedTotal.innerHTML != 0) {
??????????????? foot.className = 'foot show';
??????????? }
?? ??? ?}else{
?? ??? ??? ?foot.className="foot";
?? ??? ?}
?? ?}

?? ?//單擊事件：在已選的框中的圖片上，點(diǎn)擊“取消選擇”
?? ?selectedViewList.onclick=function(e){
?? ??? ?// console.log(e);?? ?
?? ??? ?// if(e){
?? ??? ?// ?? ?e=e;
?? ??? ?// }else{
?? ??? ?// ?? ?e=window.event;
?? ??? ?// };
?? ??? ?e=e || window.event;
?? ??? ?var el=e.srcElement;
?? ??? ?if (el.className=='del'){
?? ??? ??? ?var index=el.getAttribute('index');
?? ??? ??? ?var input=tr[index].getElementsByTagName('input')[0];
?? ??? ??? ?input.checked=false;
?? ??? ??? ?input.onclick();
?? ??? ?}
?? ?}

?? ?//以下為"+","-"及旁邊的“刪除”按鈕的單擊事件處理
?? ?//還有，為"文件框"中輸入數(shù)字的鍵盤放開事件
?? ?for (var i=0;i<tr.length;i++){
?? ??? ?//單擊事件：以下為"+","-"及旁邊的“刪除”按鈕的單擊事件處理
?? ??? ?tr[i].onclick=function(e){
?? ??? ??? ?// alert('a');
?? ??? ??? ?e=e || window.event;
?? ??? ??? ?var el=e.srcElement;
?? ??? ??? ?var cls=el.className;
?? ??? ??? ?var input=this.getElementsByTagName('input')[1];
?? ??? ??? ?var val=parseInt(input.value);
?? ??? ??? ?var reduce=this.getElementsByTagName('span')[1];

?? ??? ??? ?switch(cls){
?? ??? ??? ??? ?case 'add':
?? ??? ??? ??? ??? ?// alert('add');
?? ??? ??? ??? ??? ?input.value=val+1;
?? ??? ??? ??? ??? ?getSubTotal(this);
?? ??? ??? ??? ??? ?reduce.innerHTML='-';
?? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ?case 'reduce':
?? ??? ??? ??? ??? ?// alert('reduce');
?? ??? ??? ??? ??? ?if (val>1){
?? ??? ??? ??? ??? ??? ?input.value=val-1;
?? ??? ??? ??? ??? ??? ?getSubTotal(this);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if (input.value<=1){
?? ??? ??? ??? ??? ??? ?reduce.innerHTML='';
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ?case 'delete':
?? ??? ??? ??? ??? ?var conf=confirm('確認(rèn)要?jiǎng)h除嗎？');
?? ??? ??? ??? ??? ?if(conf){?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?this.parentNode.removeChild(this);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ?default:
?? ??? ??? ??? ??? ?break;
?? ??? ??? ?}
?? ??? ??? ?// alert('b');
?? ??? ??? ?getTotal();
?? ??? ?}

?? ??? ?//鍵盤放開事件：為"文件框"中輸入數(shù)字的鍵盤放開事件
?? ??? ?tr[i].getElementsByTagName('input')[1].onkeyup=function(){
?? ??? ??? ?var val=parseInt(this.value);
?? ??? ??? ?var tr=this.parentNode.parentNode;
?? ??? ??? ?var reduce=tr.getElementsByTagName('span')[1];
?? ??? ??? ?if (isNaN(val) || val<1){
?? ??? ??? ??? ?val=1;?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?this.value=val;

?? ??? ??? ?if(val<=1){
?? ??? ??? ??? ?reduce.innerHTML='';
?? ??? ??? ?}else{
?? ??? ??? ??? ?reduce.innerHTML='-';
?? ??? ??? ?}
?? ??? ??? ?getSubTotal(tr);
?? ??? ??? ?getTotal();
?? ??? ?}
?? ?}

?? ?//單擊事件：全部刪除事件
?? ?deleteAll.onclick=function(){?? ??? ?
?? ??? ?if(selectedTotal.innerHTML!='0'){
?? ??? ??? ?var conf=confirm('確認(rèn)要?jiǎng)h除嗎？');
?? ??? ??? ?if (conf){
?? ??? ??? ??? ?for(i=0;i<tr.length;i++){
?? ??? ??? ??? ??? ?var input=tr[i].getElementsByTagName('input')[0];

?? ??? ??? ??? ??? ?if (input.checked){
?? ??? ??? ??? ??? ??? ?tr[i].parentNode.removeChild(tr[i]);
?? ??? ??? ??? ??? ??? ?i--;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ??? ?getTotal();
?? ??? ??? ?}
?? ??? ?}
?? ?}

?? ?//以下為，打開時(shí)，勾選框缺省為選中狀態(tài)
?? ?checkAllInputs[0].checked=true;
?? ?checkAllInputs[0].onclick();
}