这个案例，有两个问题，一个是一个个勾选到全部后，全选不会打勾，其二，选中删除，不会更新下面的选中数量及总价
//这是我更正的完美demo,哈哈
2 回答
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/150
提交
取消
