初级JS实现购物车功能

这个购物车主要是由document节点进行操作的，主要功能就是商品的一些增删改查操作，这里就简单写下思路

1.先写全选功能，获取到全选按钮（allCheckBox）的复选框，添加点击事件函数

然后在获取到所有商品的复选框（cartCheckBox）可以通过getElementsByName来获取，

通过if判断全选按钮的checked是否为true，然后循环遍历商品的复选框，分别设置checked的属性达到

全选实现的功能，代码如下：

allCheckBox.onclick = function (){

if (allCheckBox.checked) {

for (var i = 0 ; i < cartCheckBoxs.length ; i++) {

cartCheckBoxs[i].checked = true;

if (cartCheckBoxs[i].checked) {

var chu = cartCheckBoxs[i].parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML;

var va = cartCheckBoxs[i].parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.childNodes[2].value;

cartCheckBoxs[i].parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML=parseInt(chu)*va;

tol.innerHTML = tolo();

inte.innerHTML = getCode();

}

}

} else{

for (var i = 0 ; i < cartCheckBoxs.length ; i++) {

cartCheckBoxs[i].checked = false;

cartCheckBoxs[i].parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML='';

tol.innerHTML = tolo();

inte.innerHTML = getCode();

}

}

}

2.实现选择单个复选框，价格内容的变化，代码如下：

for (var i = 0 ; i < cartCheckBoxs.length ; i++) {

cartCheckBoxs[i].onclick = function(){

if (this.checked) {

var chu = this.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML;

var va = this.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.childNodes[2].value;

this.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML=parseInt(chu)*va;

tol.innerHTML = tolo();

inte.innerHTML = getCode();

}else{

this.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML='';

tol.innerHTML = tolo();

inte.innerHTML = getCode();

}

}

}

3.购物车商品数量的增加和减少：

for(var i=0;i<cart6.length;i++){

var jian = cart6[i].getElementsByTagName('img')[0];

var add = cart6[i].getElementsByTagName('img')[1];

jian.onclick = function(){

if(this.nextSibling.nextSibling.value<2){

alert("数量不能小于0");

return;

}else{

this.nextSibling.nextSibling.value=parseInt(this.nextSibling.nextSibling.value)-1;

this.parentNode.nextSibling.nextSibling.innerHTML=(this.nextSibling.nextSibling.value) * (this.parentNode.previousSibling.previousSibling.innerHTML);

tol.innerHTML = tolo();

inte.innerHTML = getCode();

}

}

add.onclick = function(){

this.previousSibling.previousSibling.value=parseInt(this.previousSibling.previousSibling.value)+1;

this.parentNode.nextSibling.nextSibling.innerHTML=(this.previousSibling.previousSibling.value) * (this.parentNode.previousSibling.previousSibling.innerHTML);

tol.innerHTML = tolo();

inte.innerHTML = getCode();

}

}

4.购物车商品总价计算，代码如下：

function tolo(){

var sum=0;

for(var i=0;i<cart7.length;i++){

sum+=Number(cart7[i].innerHTML);

}

return sum;

}

5.购物车商品积分，代码如下:

function getCode(){

var ssm = 0;

for(var i=0;i<cart7.length;i++){

var code = cart7[i].previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.innerHTML;

var prace = cart7[i].previousSibling.previousSibling.previousSibling.previousSibling.innerHTML;

var num = Number(cart7[i].innerHTML)/Number(prace);

code = Number(code);

console.log(code);

console.log(prace);

ssm += num*code;

console.log(ssm);

}

return ssm;

}

6.购物车删除相应商品，代码如下：

for(var j=0;j<cart8.length;j++){

var del = cart8[j].getElementsByTagName('a')[0];

del.onclick = function(){

this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

tol.innerHTML = tolo();

inte.innerHTML = getCode();

}

}

7.购物车删除所选项，代码如下：

deleteAll.onclick = function (){

for (var i = 0 ; i < cartCheckBoxs.length ; i++) {

if (cartCheckBoxs[i].checked) {

cartCheckBoxs[i].checked = false;

cartCheckBoxs[i].parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML='';

tol.innerHTML = tolo();

inte.innerHTML = getCode();

}

}

}