刚在做的时候还是好好的，突然就不知道为什么就全选不了全部的商品了，因为字数问题删除了一些代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="images/xizilogo.jpeg" type="image/x-icon"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>期末项目购物车</title>
<style type="text/css">
html{background: url(images/xyyhtl.jpeg)}
.show{display:block;}
.hide{display:none;}
.c1{position: fixed;top:0;bottom: 0;left:0;right: 0;background: rgba(0,0,0,.5);z-index: 2;}
.c2{position: fixed;width: 400px;height: 300px;top:50%;left: 50%;z-index: 3;margin-top: -150px;margin-left: -200px;background:url(images/xyy.jpeg);}
#modal p {margin-left:90px;}
ul{list-style: none;padding: 0;margin: 0;}
div{width: 100%;border: 1px solid #5d7851;margin: 1px;}
#img1,#img2,#img3,#img4{display:none;}
div li{background: #545178;border-bottom:1px solid #fff ;}
div th{background: #515278;border-bottom:1px solid #fff ;}
div li a{text-decoration: none;color: #fff;font-size: 25px;height: 40px;line-height: 89px;padding-left: 10px;}
div li a:hover{text-decoration: underline;}
b{cursor: pointer;display: block;}
.wrap {width: 100%;display: none;}
.wrap li{background: white;margin: 0;}
.wrap li a{color: #180505;font-size: 19px;}
#left{width: 17%;float: left;overflow: hidden;background:url(images/huitailang.jpeg);}
#right{width: 71%;float: left;margin-left: -10px;display: inline;overflow: hidden;background-color:white}
.sale {background-color: rgb(15, 90, 228);color: white;text-align: center;}
#text{display:block;width:300px;cursor:pointer;height:20px;border:solid 1px #CCC;}
#boxs {background-color: white; width: 600px;height: 200px;margin: 0 auto;}
#texts {resize: none;width: 600px;height: 100px;}
#txt{margin-left: 200px;}
</style>
</head>
<body>
<img src="images/xizilogo.jpeg" style="width: 70px;height: 80px;">
<h1 style="font-size:30px;">喜羊羊商店</h1>
搜索：<input type="text" id="text1" value="请输入关键字！" onclick="Focus">
<img id="shangpintu" src="images/xiyangyang.jpeg" class="hide" style="width: 800px;height: 600px">
<input type="button" onclick="showimg()" value="确定">
<button onClick="show()" style="width: 100px;height: 60px;background-color:#515278;font-size: 22px;">主页</button>
<div id="right" style="display: none;">
<table border="1" cellspacing="73%" cellpadding="27%";>
<thead>
<th>
<input type='checkbox' class="selectAll">全选</th>
<th>商品</th>
<th>数量</th>
<th>单价</th>
<th>状态</th>
<th>库存</th>
<th>小计</th>
</thead>
<tbody>
<tr>
<td><input type='checkbox' class="checkbox1"></td>
<td><img src="images/gaojunbo.jpg" width=100px height=110px>高俊波玩偶</td>
<td>
<button class="del">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="add">+</button>
</td>
<td>
69.00
</td>
<td>
有货
</td>
<td>999</td>
<td class="xiaoji"></td>
</tr>
<tr style="background-color:#89cac7 ;">
<td><input type='checkbox' class="checkbox1"></td>
<td><img src="images/xiyangyangshiti.png" width=100px height=90px>懒洋洋玩偶</td>
<td>
<button class="del">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="add">+</button>
</td>
<td>
19.88
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr>
<td><input type='checkbox' class="checkbox1"></td>
<td><img src="images/huitailang.jpeg" width=100px height=90px>灰太狼玩偶</td>
<td>
<button class="del">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="add" >+</button>
</td>
<td>
9.99
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr style="background-color:#89cac7 ;">
<td><input type='checkbox' class="checkbox1"></td>
<td><img src="images/huitailangwanou.jpeg" width=100px height=90px>小灰灰玩偶</td>
<td>
<button class="del">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="add">+</button>
</td>
<td>
16.1
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr>
<td><input type='checkbox' class="checkbox1"></td>
<td><img src="images/kuzi.jpeg" width=100px height=90px>经典裤子</td>
<td>
<button class="del">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="add">+</button>
</td>
<td>
10.2
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr style="background-color:#89cac7 ;">
<td><input type='checkbox' class="checkbox1"></td>
<td><img src="images/piku.jpeg" width=100px height=90px>新款皮裤</td>
<td>
<button class="del">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="add">+</button>
</td>
<td>
60.1
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr>
<td><input type='checkbox' class="checkbox1"></td>
<td><img src="images/pingguodiannao.jpeg" width=100px height=90px>经典苹果电脑</td>
<td>
<button class="del">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="add">+</button>
</td>
<td>
999
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr style="background-color:#89cac7 ;">
<td><input type='checkbox' class="checkbox1"></td>
<td><img src="images/boluoshouji.jpeg" width=100px height=90px>新款菠萝手机</td>
<td>
<button class="del">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="add">+</button>
</td>
<td>
996
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr>
<td><input type='checkbox' class="checkbox1"></td>
<td><img src="images/jinpinmei.jpeg" width=200px height=160px>经典金瓶梅</td>
<td>
<button class="del">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="add">+</button>
</td>
<td>
122.81
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr style="background-color:#89cac7 ;">
<td><input type='checkbox' class="checkbox1"></td>
<td><img src="images/xiyyhuitlshuji.jpg" width=200px height=160px>新款喜洋洋书籍</td>
<td>
<button class="del">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="add">+</button>
</td>
<td>
9999
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td>总计</td>
<td class="total"></td>
</tr>
<tr>
<td>
<input type="button" style="width: 189px;height: 60px;font-size: 22px;background-color: #515278;" value="结算" id="xiaofei" >
</td>
</tr>
</tfoot>
</tfoot>
</table>
</div>
<script src="jquery-3.6.0.js"></script>
<script type="text/javascript">
//登录注册
function Focus(){
document.getElementById('text1').focus();
var reg=new RegExp("[a-zA-Z]_\d")
document.write(reg.test(text))
if(reg.test(text))
document.write(text)
else{
alert("含有非法字符")
}
}
//主页弹出
function showimg() {
var obj=document.getElementById('shangpintu');
obj.className='show';
}
function show(){ //主页小show
var show_part=document.querySelector('#right');
show_part.style.display='block';
}
//登录注册页面出现隐藏
function Show(){ //登录主持大Show
document.getElementById('shade').classList.remove('hide');
document.getElementById('modal').classList.remove('hide');
}
function Hide(){
document.getElementById('shade').classList.add('hide');
document.getElementById('modal').classList.add('hide');
}
//增加商品需求数量
$(".add").click(function() {
var num=$(this).prev().val();
if(num==20){
return;
}
$(this).prev().val(parseInt(++num));
$(this).parent().next().next().next().text(20-num)
if ($(this).parent().next().next().next().text()==0){
$(this).parent().next().next().text('无货')
}
money ()
})
//删除商品需求数量
$(".del").click(function(){
var num = $(this).next().val();
if(num==0){
return;
}
$(this).next().val(parseInt(--num));
$(this).parent().next().next().next().text(20-num)
$(this).parent().next().next().text('有货')
money ()
})
//总计
function money(){
var price=$('.add').parent().next();
var num=$('.add').prev();
var xiaoji=$('.xiaoji');
var sum=0.0;
for (var i=0;i<price.length;i++) {
var price1 = parseFloat(price.eq(i).text());
var num1 = parseFloat(num.eq(i).val());
xiaoji.eq(i).text((price1*num1).toFixed(2))
sum+=price1*num1;
}
$('.total').text(sum.toFixed(2));
//结算
var xiaofei=document.getElementById("xiaofei");
xiaofei.onclick=function(){
alert("你的本次消费是:"+$('.total').text()+"，现在你可以进行售后评价了");
};
//全选
window.onload=function(){
var selectAllBtn = document.querySelector('.selectAll')
var checkbox1s = document.querySelectorAll('.checkbox1')
console.log(selectAllBtn)
console.log(checkbox1s)
var checkedNum = checkbox1s.length;
checkbox1s.forEach(function (checkbox, index) {
checkbox.onclick = function () {
if (checkbox.checked == false) {
checkedNum--
} else if (checkbox.checked == true) {
checkedNum++
}
if (checkedNum !== checkbox1s.length) {
selectAllBtn.checked = false
} else if (checkedNum == checkbox1s.length) {
selectAllBtn.checked = true
}
}
money()
})
}
selectAllBtn.onclick = function () {
if (selectAllBtn.checked == true) {
checkbox1s.forEach(function (checkbox, index) {
checkbox.checked = true
})
checkedNum=checkbox1s.length
} else if (selectAllBtn.checked == false) {
checkbox1s.forEach(function (checkbox, index) {
checkbox.checked = false
if (checkbox.checked == false) {
checkedNum--
} else if (checkbox.checked == true) {
checkedNum++
}
if (checkedNum !== checkbox1s.length) {
selectAllBtn.checked = false
} else if (checkedNum == checkbox1s.length) {
selectAllBtn.checked = true
}
})
checkedNum=0
console.log('selectAllBtn.checked =' + selectAllBtn.checked)
}
money()
}
}
</script>
</body>
</html>
