這個(gè)案例，有兩個(gè)問(wèn)題，一個(gè)是一個(gè)個(gè)勾選到全部后，全選不會(huì)打勾，其二，選中刪除，不會(huì)更新下面的選中數(shù)量及總價(jià)
//這是我更正的完美demo,哈哈
XMYL
2019-10-30
2 回答
舉報(bào)
0/150
提交
取消
2020-09-18
可以實(shí)現(xiàn)的，你自己的代碼有問(wèn)題吧。
2019-10-30
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('確認(rèn)刪除嗎?');
????????????????????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('確認(rèn)全部刪除?');
????????????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();
}