如何实现全选的按钮，目前已经实现点击即可全选
想实现点击第一下是全选，第二下是全不选，以此类推，当选项中有选与没选的状态时，点击为全选
主要实现代码块：
checkAll: function() { //全选按钮
for (var i in this.items) {
this.items[i].check.checked = true;
}
},
html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车title>
<style>
.cart{width: 700px;padding: 0 10px 10px;border: 1px solid #D5E5F5;}
.cart-title {margin-bottom: 10px;font-size: 14px;border-bottom: 1px solid #AED2FF;line-height: 30px;height: 30px;font-weight: 700;text-indent: 15px;color: #333;font-family: 'Microsoft YaHei';}
.cart-table{width: 100%;margin: 0 auto;border-collapse: collapse;font-size: 12px;font-family: Verdana,"Microsoft YaHei";color: #333;}
.cart-table th{border-bottom: 2px solid #B2D1FF;font-weight: normal;height: 35px;line-height: 23px;}
.cart-item {background-color: #FAFCFF;border-bottom: 1px dotted #84B3FD;}
.cart-item td{height: 55px;text-align: center;}
.cart-item .cart-txt-left{text-align:left;}
.cart-name{color: #3366D4;font-weight: bold;}
.cart-subtotal{color: #FF3334;font-weight: bold;}
.cart-reduce,.cart-add{display:inline-block;width: 16px;height: 16px;line-height:16px;color: #FFF;background-color: #BDBDBD;border: 0;cursor: pointer;border-radius: 2px;font-family:'Arial';font-size:13.3333px;}
.cart-reduce:hover,.cart-add:hover{background-color: #FF9900;}
.cart-num {margin: 5px;width: 35px;text-align: center;height: 20px;line-height: 20px;padding: 0 3px;display:inline-block;background:#fff;border:1px solid #bbb}
.cart-del,.cart-all{color: #3366D4;}
.cart-del:hover,.cart-all:hover{text-decoration:underline;cursor:pointer}
.cart-bottom{height: 55px;text-align:right}
.cart-bottom .cart-all{position:relative;top:1px}
.cart-total-price{color: #FF3334;font-weight: bold;font-size: 16px;}
.cart-bottom-btn{color: #FFF;font-size: 14px;font-weight: 600;cursor: pointer;margin: 0 20px;background: #FE8502;border: 1px solid #FF6633;border-radius: 5px 5px 5px 5px;padding: 6px 12px;}
.cart-bottom-btn:hover{background: #FF6600;}
style>
head>
<body>
<div class="cart">
<div class="cart-title">我的购物车div>
<table class="cart-table">
<tr>
<th width="60"><span class="cart-all">全选span>th><th>商品th><th width="120">单价th><th width="100">数量th><th width="120">小计th><th width="80">操作th>
tr>
<tr class="cart-item">
<td><input class="cart-check" type="checkbox" checked>td>
<td class="cart-txt-left"><span class="cart-name">Loading...span>td>
<td><span class="cart-price">0span>td>
<td><span class="cart-reduce" >-span><span class="cart-num">0span><span class="cart-add">+span>td>
<td><span class="cart-subtotal">0span>td>
<td><span class="cart-del">删除span>td>
tr>
<tr class="cart-bottom">
<td colspan="6">
<span class="cart-bottom-span">已选择 <span class="cart-total-num">0span> 件商品span>
<span class="cart-bottom-span">总计：<span class="cart-total-price">0span>span>
<span class="cart-bottom-btn">提交订单span>
td>
tr>
table>
div>
<script src="ShopCart01.js">script>
<script>
ShopCart('cart', [
{name: 'JavaScript实战', price: 45.8, num: 1},
{name: 'PHP基础案例教程', price: 49.8, num: 2},
{name: 'HTML+CSS网页制作', price: 45.2, num: 5},
{name: 'Java基础入门', price: 45, num: 8},
]);
script>
body>
html>
(function(window) {
var ShopCart = function(prefix, defCart) {
Find.prototype.prefix = prefix; //prefix=cart
var cart = new Cart(document.getElementsByClassName(prefix)[0]);
//添加商品信息
for (var i in defCart) {
cart.add(defCart[i]);
}
cart.updateTotal();
};
function Find(obj) {
this.obj = obj;
}
Find.prototype = {
prefix: '',
className: function(className) {
return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];
}
};
function Cart(obj) {
this.items = [];
var find = new Find(obj); //查找对象所在容器
//全选按钮
this.all = find.className('all'); //getElementsByClassName("cart-all");
this.bottom = find.className('bottom');
this.table = find.className('table');
this.num = find.className('total-num');
this.price = find.className('total-price');
this.tmp = find.className('item');
this.tmp.parentNode.removeChild(this.tmp); //删除模板对应的区域
var cart = this;
var flag = true; //设置选项全选中
this.all.onclick = function() {
cart.checkAll();
};
}
Cart.prototype = {
add: function(data) {
var tmp = this.tmp.cloneNode(true); //克隆元素节点，深拷贝
var item = new Item(tmp, data); //创建购物车的一件商品对象
var cart = this;
item.check.onclick = function() {
cart.updateTotal();
}
item.add.onclick = function() {
item.num.textContent = ++item.data.num;
item.updateSubtotal();
cart.updateTotal();
}
item.reduce.onclick = function() {
if (item.data.num > 1) {
item.num.textContent = --item.data.num;
item.updateSubtotal();
cart.updateTotal();
} else {
alert('至少选择一件商品，如果不需要，请直接删除');
}
}
item.del.onclick = function() {
if (confirm('您确定要删除此商品吗？')) {
tmp.parentNode.removeChild(tmp);
cart.del(item);
cart.updateTotal();
}
}
// 更新小计
item.updateSubtotal(); //默认加载商品和数量产生的小计
// 保存新增的商品对象
this.items.push(item); //存在数组里
// 放入购物车容器中
// this.bottom.before(tmp);//列表项存放的位置，在总计之前
this.table.childNodes[1].insertBefore(tmp, this.bottom);
},
updateTotal: function() {
var num = 0,
price = 0;
for (var i in this.items) {
var item = this.items[i];
if (item.check.checked) {
num += item.data.num;
price += item.data.num * item.data.price;
}
}
this.num.textContent = num;
this.price.textContent = price.toFixed(2);
},
checkAll: function() { //全选按钮
for (var i in this.items) {
this.items[i].check.checked = true;
}
},
del: function() {
for (var i in this.items) {
if (this.items[i] === item) {
delete this.items[i];
}
}
}
};
/**
* Item 购物车中的单件商品
* @constructor
* @param {String} tmp 模板
* @param {Array} data 数据
*/
function Item(tmp, data) {
var find = new Find(tmp);
this.check = find.className('check');
this.name = find.className('name');
this.price = find.className('price');
this.num = find.className('num');
this.add = find.className('add');
this.reduce = find.className('reduce');
this.subtotal = find.className('subtotal'); //小计
this.del = find.className('del');
this.data = data;
this.name.textContent = data.name;
this.price.textContent = data.price.toFixed(2); //Number 四舍五入为指定小数位数的数字
this.num.textContent = data.num;
}
Item.prototype = {
/**
* 更新小计
*/
updateSubtotal: function() {
this.subtotal.textContent = (this.data.num * this.data.price).toFixed(2);
}
};
window['ShopCart'] = ShopCart;
})(window);
1.全局设置一个全选状态，val isAll = false;
2.点击全选按钮时获取全选按钮的选中状态，并将此状态赋值个isAll
3.循环遍历列表中有节点，将这些节点的checked设置为isAll
4.点击列表中的复选框时做个判断，循环列表里所有节点并获取每个节点的chekced值，如果有任何一个为false，则将isAll设置为false，否则设置为true
你的代码只改了这两部分，我试了下可以实现，你试试
updateTotal: function () {
var num = 0,
price = 0;
checkarr = [];
for (var i in this.items) {
var item = this.items[i];
if (item.check.checked) {
checkarr.push(i)
num += item.data.num;
price += item.data.num * item.data.price;
}
}
this.all.innerText = checkarr.length == this.items.length ? '取消全选' : '全选'
this.num.textContent = num;
this.price.textContent = price.toFixed(2);
},
checkAll: function () {
//全选按钮
if(this.all.innerText == '全选'){
for (var i in this.items) {
this.items[i].check.checked = true;
this.all.innerText = '取消全选'
}
}else {
for (var i in this.items) {
this.items[i].check.checked = false;
this.all.innerText = '全选'
}
}
this.updateTotal();
},