这个案例，有两个问题，一个是一个个勾选到全部后，全选不会打勾，其二，选中删除，不会更新下面的选中数量及总价

个回答

似朝朝我心

2020-09-18 23:30:58

可以实现的，你自己的代码有问题吧。

0
XMYL

2019-10-30 15:18:46

window.onload=function(){
    var cartTable=document.getElementById('cartTable');
    var trs=cartTable.children[1].rows;
    var checkInputs=document.getElementsByClassName('check');
    var checkAllInputs=document.getElementsByClassName('check-all');
    var checkOneInputs=document.getElementsByClassName('check-one');
    var selectedTotal=document.getElementById('selectedTotal');
    var priceTotal=document.getElementById('priceTotal');
    var checkedAll=false;
    var selected=document.getElementById('selected');
    var foot=document.getElementById('foot');
    var selectedViewList=document.getElementById('selectedViewList');
    var deleteAll=document.getElementById('deleteAll');

    function checkall(){
        for(var a=0,len=checkOneInputs.length; a<len; a++){
            if(checkOneInputs[a].checked){
                checkedAll=true;
            }else{
                checkedAll=false;
                break;
            }
        }
        for(var j=0,len=checkAllInputs.length; j<len; j++){
                checkAllInputs[j].checked=checkedAll;
            }
    }

    function getTotal(){
        var selected=0;
        var price=0;
        var _HTML='';

        for(var i=0,len=trs.length; i<len; i++){
            if(trs[i].getElementsByTagName('input')[0].checked){
                trs[i].className='on';
                selected+=parseInt(trs[i].getElementsByTagName('input')[1].value);
                price+=parseFloat(trs[i].cells[4].innerText);
                _HTML+='<div><img src="'+trs[i].getElementsByTagName('img')[0].src+'" alt="" /><span class="del" index="'+i+'">取消选择</span></div>'
            }else{
                trs[i].className='';
            }
        }
        selectedTotal.innerText=selected;
        priceTotal.innerText=price.toFixed(2);
        selectedViewList.innerHTML=_HTML;
        if(!selected){
            foot.className='foot';
        }
        checkall();
    }

    function getSubTotal(tr){
        var tds=tr.cells;
        var price=parseFloat(tds[2].innerText);
        var count=parseInt(tr.getElementsByTagName('input')[1].value);
        var SubTotal=parseFloat(price * count).toFixed(2);
        tds[4].innerText=SubTotal;
    }

    for(var i=0,len=checkInputs.length; i<len; i++){
        checkInputs[i].onclick=function(){
            if(this.className==='check-all check'){
                for(var k=0,len=checkInputs.length; k<len; k++){
                    checkInputs[k].checked=this.checked;
                }
            }
            if(!this.checked){
                for(var j=0,len=checkAllInputs.length; j<len; j++){
                    checkAllInputs[j].checked=false;
                }
            }
            getTotal();
        }
    }

    for(var i=0, len=trs.length; i<len; i++){

        trs[i].onclick=function(e){
            var el=e.srcElement;
            var cls=el.className;
            var input=this.getElementsByTagName('input')[1];
            var val=parseInt(input.value);
            var reduce=this.getElementsByClassName('reduce')[0];

            switch(cls){
                case 'add':
                    val+=1;
                    break;
                case 'reduce':
                    if(val>1){
                        val-=1;
                    }
                    break;
                case 'delete':
                    var conf=confirm('确认删除吗?');
                    if(conf){
                        this.parentNode.removeChild(this);
                    }
                    break;
                default:
                    break;
            }

            if(val>1){
                reduce.innerText='-';
            }else{
                reduce.innerText='';
            }
            input.value=val;
            getSubTotal(this);
            getTotal();
        }

        trs[i].getElementsByTagName('input')[1].onkeyup=function(){
            var val=parseInt(this.value);
            var that=this.parentNode.parentNode
            var reduce=that.getElementsByClassName('reduce')[0];
            if(val>1){
                reduce.innerText='-';
            }else{
                val=1;
                reduce.innerText='';
            }
            this.value=val;
            getSubTotal(that);
            getTotal();
        }
    }

    deleteAll.onclick=function(){
        if(selectedTotal.innerText!='0'){
            var conf=confirm('确认全部删除?');
            if(conf){
                for(var i=0,len=trs.length; i<len; i++){
                    console.log(trs[i]);
                    var input=trs[i].getElementsByTagName('input')[0];
                    if(input.checked){
                        trs[i].parentNode.removeChild(trs[i]);
                        len--;
                        i--;
                    }
                }
                selectedTotal.innerText='0';
                priceTotal.innerText='0.00';
            }
        }
    }

    selected.onclick=function(){
        if(foot.className==='foot'){
            if(selectedTotal.innerText!=0){
                foot.className='foot show';
            }
        }else{
            foot.className='foot';
        }
    }

    selectedViewList.onclick=function(e){
        var el=e.srcElement;
        if(el.className=='del'){
            var index=el.getAttribute('index');
            var input=trs[index].getElementsByTagName('input')[0];
            input.checked=false;
            getTotal();
        }
    }

    checkAllInputs[0].checked=true;
    checkAllInputs[0].onclick();

}

0