JS里关于复选框部分的代码，请老师看看我的思路对吗，问题在哪里，快奔溃了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>5-2作业</title> <link rel="stylesheet" href="css/css.css"> </head> <body> <header class="header"> <div class="logo"></div> <div class="nav"> <a href="" class="nav_item">课程</a> <a href="" class="nav_item nav_item_new">职业路径</a> <a href="" class="nav_item">实战</a> <a href="" class="nav_item">猿问</a> <a href="" class="nav_item">手记</a> </div> <div class="profile"> <a href="" class="profile_item profile_phone"></a> <a href="" class="profile_item profile_message"></a> <a href="" class="profile_item profile_ava"></a> </div> <div class="search"> <input type="text" class="search_input" placeholder="前端入门"><a href="" class="search_submit"></a> </div> </header> <div class="banner"> </div> <div class="settlement"> <div class="title"> <h1>我的购物车</h1> </div> <div class="list"> <div> <div class="flex1"><input type="checkbox" class="q-checkbox" checked>全选</div> <div class="flex2">商品名称</div> <div class="flex3">总价</div> <div class="flex4">单价</div> <div class="flex5">数量</div> <div class="flex6">操作</div> </div> <div> <div class="flex1"><input type="checkbox" class="checkbox" checked></div> <div class="flex2"><img src="img/g1.jpg"><span>前端小白成长记</span></div> <div class="flex3 totalprice">¥<span>396</span></div> <div class="flex4 price">¥<span>396</span></div> <div class="flex5"> <div class="sub">-</div> <input type="number" value="1" class="number"> <div class="add">+</div> </div> <div class="flex6">删除</div> </div> <div> <div class="flex1"><input type="checkbox" class="checkbox" checked></div> <div class="flex2"><img src="img/g2.jpg"><span>前端小白成长记</span></div> <div class="flex3 totalprice">¥<span>396</span></div> <div class="flex4 price">¥<span>396</span></div> <div class="flex5"> <div class="sub">-</div> <input type="number" value="1" class="number"> <div class="add">+</div> </div> <div class="flex6">删除</div> </div> <div> <div class="flex1"><input type="checkbox" class="checkbox" checked></div> <div class="flex2"><img src="img/g1.jpg"><span>前端小白成长记</span></div> <div class="flex3 totalprice">¥<span>396</span></div> <div class="flex4 price">¥<span>396</span></div> <div class="flex5"> <div class="sub">-</div> <input type="number" value="1" class="number"> <div class="add">+</div> </div> <div class="flex6">删除</div> </div> <div> <div class="flex1"><input type="checkbox" class="checkbox" checked></div> <div class="flex2"><img src="img/g1.jpg"><span>前端小白成长记</span></div> <div class="flex3 totalprice">¥<span>396</span></div> <div class="flex4 price">¥<span>396</span></div> <div class="flex5"> <div class="sub">-</div> <input type="number" value="1" class="number"> <div class="add">+</div> </div> <div class="flex6">删除</div> </div> </div> <div class="pay"> <div class="price">应付金额：<span>¥1584</span></div> <div class="btn"><input type="submit" value="去结算"></div> </div> </div> <footer class="footer"> <div class="footer_link"> <a href="" class="footer_link_item">网站首页</a> <a href="" class="footer_link_item">企业合作</a> <a href="" class="footer_link_item">人才招聘</a> <a href="" class="footer_link_item">联系我们</a> <a href="" class="footer_link_item">讲师招聘</a> <a href="" class="footer_link_item">常见问题</a> <a href="" class="footer_link_item">意见反馈</a> <a href="" class="footer_link_item">慕课大学</a> <a href="" class="footer_link_item">友情链接</a> </div> <div class="footer_copy">Copyright © 2016 imooc.com All Rights Reserved | 京ICP备 13046642号-2</div> <div class="footer_share"> <a href="" class="footer_share_item footer_share_item_i_1"><span></span></a> <a href="" class="footer_share_item footer_share_item_i_2"></a> <a href="" class="footer_share_item footer_share_item_i_3"></a> </div> </footer> <script src="js/js.js"></script> </body> </html>
body {
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.header {
width: 100%;
height: 60px;
background-color: #000;
position: relative;
}
.header .logo {
width: 128px;
height: 40px;
background: url(../img/logo.png) no-repeat center;
margin: 10px 25px;
background-size: cover;
float: left;
}
.header .nav {
height: 100%;
float: left;
}
.header .nav_item {
display: block;
float: left;
padding: 0 25px;
color: #fff;
height: 60px;
line-height: 60px;
font-size: 16px;
}
.header .nav_item_new {
background: url(../img/icon-new.png) no-repeat 90px 8px;
}
.header .nav_item:hover,
.header .nav_item_new {
background-color: #363c41;
}
.header .search {
padding-right: 25px;
position: relative;
margin: 12px 25px;
height: 36px;
float: right;
}
.header .search_input {
width: 242px;
border: none;
outline: none;
border-bottom: 1px solid #ccc;
height: 26px;
text-indent: .5em;
background-color: #000;
height: 36px;
line-height: 36px;
}
.header .search_input::placeholder {
color: #959aa0;
font-size: 12px;
}
.header .search_submit {
display: block;
position: absolute;
right: 25px;
top: 4px;
background: url(../img/icon-1-sprite_w23.png) no-repeat 0 0;
width: 22px;
height: 22px;
}
.header .profile {
float: right;
}
.header .profile_item {
display: block;
position: relative;
float: left;
width: 60px;
height: 60px;
}
.header .profile_item:hover {
background-color: #363c41;
}
.header .profile_phone::before,
.header .profile_message::before,
.header .profile_ava::before {
content: "";
display: block;
position: absolute;
left: 19px;
top: 19px;
width: 22px;
height: 22px;
}
.header .profile_phone::before {
background: url(../img/shopcar.png) no-repeat 0 -213px;
}
.header .profile_message::before {
background: url(../img/icon-1-sprite_w22.png) no-repeat 0 -44px;
}
.header .profile_ava::before {
background: url(../img/ava.jpg) no-repeat center center;
background-size: cover;
border-radius: 50%;
}
.banner{
width: 100%;
height: 200px;
background: url(../img/cart-header-bg.jpg) repeat-x;
background-size: contain;
}
.settlement{
width: 1000px;
margin: -180px auto 0 auto;
}
.settlement .title{
height: 60px;
line-height: 60px;
}
.settlement .list{
width: 100%;
box-sizing: border-box;
box-shadow: 5px 5px 15px 5px lightgray;
margin: 20px auto;
text-align: center;
}
.settlement .list > div{
display: flex;
height: 150px;
align-items: center;
justify-content: center;
}
.settlement .list > div:first-child{
height: 80px;
background: rgb(235,235,235);
}
.settlement .list > div:nth-child(3),
.settlement .list > div:nth-child(4),
.settlement .list > div:nth-child(5){
border-top: lightgrey solid 1px;
}
.settlement .list > div .flex1{
flex: 1;
}
.settlement .list > div .flex2{
flex: 6;
}
.settlement .list > div .flex3{
flex: 3;
}
.settlement .list > div .flex4{
flex: 3;
}
.settlement .list > div .flex5{
flex: 3;
display: flex;
justify-content: center;
}
.settlement .list > div .flex5 > div{
width: 15px;
height: 15px;
border: 1px solid lightgray;
box-sizing: border-box;
cursor: pointer;
line-height: 12px;
}
.settlement .list > div .flex5 > input{
width: 40px;
height: 20px;
margin: 0 10px;
}
.settlement .list > div .flex6{
flex: 3;
}
.settlement .pay{
display: flex;
border: 1px solid lightgrey;
box-sizing: border-box;
height: 60px;
margin: 20px auto 40px auto;
}
.settlement .pay .price{
flex: 8;
text-align: right;
line-height: 60px;
padding-right: 20px;
font-size: 20px;
}
.settlement .pay .price span{
color: red;
}
.settlement .pay .btn{
flex: 1;
}
.settlement .pay .btn input{
width: 100%;
height: 100%;
background: red;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
}
.footer {
width: 100%;
height: 100px;
background-color: #000;
position: relative;
font-size: 16px;
bottom: 0;
}
.footer_link {
width: 1200px;
margin: 0 auto;
padding: 30px 0 6px 40px;
height: 24px;
line-height: 24px;
}
.footer_link_item {
display: inline-block;
margin-right: 24px;
color: #959aa0;
}
.footer_link_item:hover {
color: #fff;
}
.footer_copy {
width: 1200px;
margin: 0 auto;
padding: 0 0 0 40px;
font-size: 14px;
height: 20px;
line-height: 20px;
color: #959aa0;
}
.footer_share {
position: absolute;
width: 135px;
height: 32px;
right: 250px;
top: 34px;
}
.footer_share_item {
display: block;
margin-right: 13px;
background: url(../img/footer-sprite.png) no-repeat;
opacity: .5;
float: left;
width: 32px;
height: 32px;
}
.footer_share_item_i_1 {
background-position: 0 -279px;
}
.footer_share_item_i_1:hover span {
display: block;
}
.footer_share_item_i_1 span {
background: url(../img/footer-sprite.png) no-repeat;
display: none;
position: absolute;
width: 170px;
height: 220px;
top: -223px;
right: 35px;
}
.footer_share_item_i_2 {
background-position: 0 -321px;
}
.footer_share_item_i_3 {
background-position: 0 -363px;
}
.footer_share_item:hover {
opacity: 1;
}var sub = document.querySelectorAll(".sub"),
add = document.querySelectorAll(".add"),
number = document.querySelectorAll(".list .number"),
price = document.querySelectorAll('.list .price span'),
totalprice = document.querySelectorAll(".list .totalprice span"),
pay = document.querySelector(".pay .price > span"),
checkbox = document.querySelectorAll(".checkbox"),
checkboxBtn = document.querySelector(".q-checkbox"),
arr = [],
abcd = true;
//点击减号，数量减少，计算总价
for (var i = 0; i < sub.length; i++) {
(function (i) {
sub[i].onclick = function () {
if (number[i].value > 1) {
number[i].value--;
TotalPrice(i, price, number);
PayPrice();
}
}
})(i)
}
//点击加号，数量增加，计算总价
for (var i = 0; i < add.length; i++) {
(function(i){
add[i].onclick = function () {
number[i].value++;
TotalPrice(i, price, number);
PayPrice();
}
})(i)
}
//输入商品数量时，计算总价
for (var i = 0; i < number.length; i++) {
(function (i) {
number[i].oninput = function(){
TotalPrice(i, price, number);
PayPrice();
}
})(i)
}
//总价=单价×数量
function TotalPrice(index, price, number) {
totalprice[index].innerHTML = parseInt(parseInt(price[index].innerHTML) * parseInt(number[index].value));
}
//应付金额
function PayPrice(){
var sum = 0;
for (var i = 0; i < totalprice.length; i++) {
sum = sum + parseInt(totalprice[i].innerHTML);
pay.innerHTML = "¥" + sum;
}
}
//点击全选按钮，选中所有，再次点击，取消所有
checkboxBtn.onclick = function () {
if(abcd){
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].checked = false;
}
abcd = false;
}else{
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].checked = true;
}
abcd = true;
}
}
//将所有复选框的状态传入数组
for (var i = 0; i < checkbox.length; i++) {
arr.push(checkbox[i].checked);
}
//搜索未选中状态，如果不存在，则为全选状态，如果存在，则不是全选状态
if(arr.indexOf('false')===-1){
checkboxBtn.checked = true;
}else{
checkboxBtn.checked = false;
}1
收起
正在回答
1回答
你好，点击全选按钮效果没有问题的，但是下面商品按钮是有问题的：
（1）取消其中一个勾选，全选按钮不会取消勾选
（2）点击全选按钮取消勾选，然后再把下面商品一个一个勾选上，全选按钮没有被勾选
参考修改：
可以重新测试下，祝学习愉快！
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星