老师，Js的几个功能怎么没实现？

通过键盘直接输入数字，鼠标失去焦点时，对应商品的总价随之变化要怎么做呢？
将每一个的复选框都设置自定义属性‘check’为‘yes’。这一步是为什么呢？
每一个复选框不是有checked的属性都设置成true了吗？为什么还要再加一个check属性？

<!doctype html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

</header>

<div>我的购物车</div>

</div>

</section>

<tr>

</tr>

<tr>

<td><input type="checkbox" checked class="checkbox"/><img src="img/g1.jpg">  <span>前端小白成长记</span></td>

</tr>

<tr>

<td><input type="checkbox" checked class="checkbox"/><img src="img/g2.jpg">  <span>前端小白成长记</span></td>

</tr>

<tr>

<td><input type="checkbox" checked class="checkbox"/><img src="img/g1.jpg">  <span>前端小白成长记</span></td>

</tr>

<tr>

<td><input type="checkbox" checked class="checkbox"/><img src="img/g1.jpg">  <span>前端小白成长记</span></td>

</tr>

</table>

</div>

</section>

</div>

</div>

</a>

</div>

</footer>

</body>

</html>

margin:0;

padding:0;

}

text-decoration:none;

}

/*header区域*/

header{

width:100%;

background-color:#010101;

height:60px;

}

header .logo{

width:128px;

height:38px;

background:url(../img/logo.png) no-repeat center;

float:left;

margin:11px 20px;

}

header .nav{

float:left;

height:100%;

}

header .nav .nav-item{

display:block;

float:left;

height:60px;

line-height:60px;

padding:0 25px;

color:white;

font-size:15px;

}

header .nav .nav-item:hover{

background-color:#363c41;

}

header .nav .nav-item_new{

background:#363c41 url(../img/icon-new.png) no-repeat 84px 10px;

}

header .search{

float:right;

padding-right:25px;

position:relative;

margin:11px 25px;

height:38px;

}

header .search input{

width:242px;

border:none;

height:38px;

line-height:38px;

outline:none;

border-bottom:1px solid #363c41;

background-color:#010101;

}

header .search:before{

content:'前端入门';

display:block;

width:72px;

height:30px;

line-height:30px;

text-align:center;

background-color:#363c41;

color:#999;

font-size:13px;

position:absolute;

}

header .search .search_submit{

display:block;

position:absolute;

right:50px;

top:4px;

width:22px;

height:22px;

background-position:0 0;

background-image:url(../img/icon-1-sprite_w22.png);

}

header .profile{

float:right;

}

header .profile .profile-item{

display:block;

float:left;

width:60px;

height:60px;

position:relative;

}

header .profile .cart:before,

header .profile .message:before{

content:'';

display:block;

position:absolute;

width:22px;

height:22px;

top:19px;

left:19px;

background-image:url(../img/icon-1-sprite_w22.png);

}

header .profile .cart:before{

background-position:0 -22px;

}

header .profile .message:before{

background-position:0 -44px;

}

header .profile .ava{

width:36px;

height:36px;

margin:12px;

background:url(../img/ava.jpg) no-repeat center;

background-size:cover;

border-radius:50%;

}

/*banner区域*/

section.banner{

height:160px;

width:100%;

background:url(../img/cart-header-bg.jpg);

}

section.banner .wrap{

width:1100px;

margin:0 auto;

position:relative;

}

section.banner .wrap div{

font-size:28px;

position:absolute;

top:40px;

}

/*商品结算区域*/

section.cart{

height:590px;

}

section.cart .wrap{

width:1102px;

margin:0 auto;

}

section.cart .wrap .goods{

width:1100px;

height:532px;

box-shadow:0 0 8px #ccc;

position:relative;

top:-58px;

}

section.cart table{

width:100%;

}

section.cart table tr{

height:118px;

}

section.cart table tr:first-child{

height:58px;

width:100%;

background:#ebebeb;

line-height:58px;

color:#6d6d6d;

}

section.cart table tr td{

border-bottom:1px solid #ccc;

}

section.cart table tr td:first-child{

width:470px;

}

section.cart table tr td:nth-child(2){

width:138px;

}

section.cart table tr td:first-child input{

margin-left:20px;

vertical-align:middle;

}

section.cart table tr td:first-child .checkbox{

position:relative;

top:-40px;

}

section.cart table tr td:first-child span{

position:relative;

top:-60px;

font-size:19px;

color:#999;

}

section.cart table tr:not(:first-child) td:nth-child(2),

section.cart table tr:not(:first-child) td:nth-child(3){

color:#999;

font-size:18px;

}

section.cart table tr td:nth-child(4) input:nth-child(2){

display:inline-block;

width:60px;

height:22px;

border-radius:0;

margin:0 6px;

text-indent:6px;

}

section.cart table tr td:nth-child(4) input:nth-child(1),

section.cart table tr td:nth-child(4) input:nth-child(3):hover{

cursor:pointer;

}

section.cart table tr td:nth-child(5){

width:104px;

}

section.cart table tr td img{

width:160px;

height:90px;

margin-left:30px;

position:relative;

top:4px;

}

section.cart .wrap .account{

width:1100px;

height:50px;

border:1px solid #ddd;

margin-top:24px;

}

section.cart .wrap .account p{

float:right;

line-height:50px;

color:#999;

font-size:14px;

}

section.cart .wrap .account p span{

font-size:22px;

color:red;

}

section.cart .wrap .account button{

float:right;

border-radius:0;

height:50px;

width:120px;

background:red;

border:none;

color:#fff;

text-align:center;

font-size:18px;

margin-left:20px;

}

section.cart .wrap .account button:hover{

cursor:pointer;

}

/*footer区域*/

footer{

background-color:#010101;

height:90px;

width:100%;

}

footer .wrap{

width:1100px;

margin:0 auto;

position:relative;

}

footer .link{

width:800px;

line-height:12px;

height:12px;

padding:30px 0 16px 0;

}

footer .link .link-item{

display:inline-block;

margin-right:30px;

float:left;

color:#959aa0;

font-size:14px;

}

footer .link .link-item:hover{

color:#fff;

}

footer .copy{

width:800px;

height:12px;

line-height:12px;

color:#666;

font-size:12px;

}

footer .share{

position:absolute;

width:150px;

height:34px;

right:0;

top:28px;

}

footer .share .share-item{

float:left;

display:inline-block;

margin-left:13px;

width:34px;

height:34px;

background:url(../img/footer-sprite.png);

}

footer .share .share-item:hover{

background:

}

footer .share .share-item_wx{

background-position:0 -279px;

position:relative;

}

footer .share .share-item_wx .code{

height:220px;

width:200px;

background:url(../img/footer-sprite.png) no-repeat 0 0;

position:absolute;

top:-220px;

left:-70px;

display:none;

}

footer .share .share-item_wx:hover .code{

display:block;

}

footer .share .share-item_wb{

background-position:0 -320px;

}

footer .share .share-item_qq{

background-position:0 -363px;

}

var cart=document.querySelector('#cart');

var cartElem={

checkboxAll:cart.querySelector('.checkboxAll'), //全选框

checkboxes:cart.querySelectorAll('.checkbox'), //复选框们

totalPrices:cart.querySelectorAll('.total_price'), //总价们

prices:cart.querySelectorAll('.price'), //单价们

substract:cart.querySelectorAll('.substract'), //减们

add:cart.querySelectorAll('.add'), //加们

counts:cart.querySelectorAll('.count'), //数量们

payable:cart.querySelector('.payable') //结算价格

}

console.log(cartElem);

//点击加、减改变数量

//定义遍历函数

function each(array,fn){

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

fn(i,array[i]);

}

//加

each(cartElem.add,function(index,elem){

elem.onclick=function(){

cartElem.counts[index].value=operation.add(cartElem.counts[index].value);

totalPrice(index);

}

})

//减值为1时不再减

each(cartElem.substract,function(index,elem){

elem.onclick=function(){

if(cartElem.counts[index].value<=1){

return;

}else{

cartElem.counts[index].value=operation.substract(cartElem.counts[index].value);

totalPrice(index);

}

})

//通过键盘直接输入数字，鼠标失去焦点时，对应商品的总价随之变化

each(cartElem.totalPrices,function(index,elem){

elem.onblur=function(){

cartElem.counts[index].value=onkeypress()

totalPrice(index);

}

})

//更新总价

function totalPrice(index){

cartElem.totalPrices[index].innerHTML=cartElem.prices[index].innerHTML*cartElem.counts[index].value;

}

//更新结算价格

function payPrice(){

var pay=0;

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

pay+= +cartElem.totalPrices[i].innerHTML;

}

cartElem.payable.innerHTML=pay;

}

//加、减运算

var operation={

add:function(num){

return +num+1;

substract:function(num){

return num-1;

}

//点击键盘输入数量

document.onkeypress=function(event){

return event.keyCode;

}

/*全选框复选框需求：

页面刚加载进来时，为全选状态，单击全选按钮，切换全选/全不选状态

在所有的商品中，有一条商品处于未选中状态，全选按钮就处于未选中状态；

当所有的商品都为选中状态时，全选按钮要为选中状态

只有当该条商品为选中状态时，数量和选中状态的变化会时刻影响结算栏中的应付金额

做法：

1.下面4个复选框按钮的逻辑：

（1）定义一个方法，如checkbox()。在方法中添加以下内容：

获取下面商品区复选框的集合checks（也就是下面四个），

对集合进行for循环遍历，把每一个复选框的checked的属性都设置成true，

将每一个的复选框都设置自定义属性‘check’为‘yes’。

给全选按钮设置all属性为yes。

（2）对商品区的每一个复选框做点击事件，

判断条件，如果当前复选框的‘check属性值为‘yes’，就把属性值变为‘no’，否则属性值就是‘yes’。

（3）定义一个arr数组，对商品区的复选框进行for循环，

将每一个获取了‘check’属性的复选框推入arr数组中。

（4）进行if判断，检测arr数组里面是否有‘no’值，

如果有，就把全选的按钮的checked设置false，如果没有‘no’值，就把全选按钮的checked属性设置为true。

（5）最后调用总价的方法，重新计算总价。

2.全选按钮的逻辑：

对全选按钮做点击事件，

获取在之前设置check方法中给全选按钮设置的all属性（开始yes，是都勾选状态）。

如果为no，就调用checkbox方法，将所有的都勾选上。

如果为yes，就循环遍历所有按钮，将checked属性设置为false，将设置的check属性设置为no，将全选按钮的all属性设置为no。*/

//复选框及其与全选按钮的交互

function checkbox(){

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

cartElem.checkboxes[i].checked='true';

cartElem.checkboxes[i].setAttribute('check','yes');

cartElem.checkboxAll.checked='true';

cartElem.checkboxAll.setAttribute('all','yes');

cartElem.checkboxes[i].onclick=function(){

if(this.getAttribute('check')=='yes'){ //单击复选框按钮切换选中/不选状态

this.setAttribute('check','no');

}else{

this.setAttribute('check','yes');

}

//根据复选框状态设置全选按钮状态

var arr=[];

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

arr.push(cartElem.checkboxes[i].getAttribute('check'));

}

console.log(arr);

if(arr.indexOf('no')==-1){

cartElem.checkboxAll.checked='true';

cartElem.checkboxAll.setAttribute('all','yes');

}else{

cartElem.checkboxAll.checked='false';

cartElem.checkboxAll.setAttribute('all','no');

}

checkbox();

payPrice();

//全选按钮点击事件

cartElem.checkboxAll.onclick=function(){

if(this.getAttribute('all')=='no'){

checkbox();

}else{

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

cartElem.checkboxes[i].checked='false';

cartElem.checkboxes[i].setAttribute('check','no');

this.setAttribute('all','no');

}

小章鱼丸 2019-01-07

源自：JavaScript实现简易计算器 5-2 作业题

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2019-01-08 10:02:00

用可以用复选框自带的checked属性判断全选按钮状态的，在这只是做一个标记而已。如下修改：

自己测试下。

收起回答

小章鱼丸提问者 #1

好的，老师。还想问下这里function checkbox(){ for(var i=0;i<cartElem.checkboxes.length;i++){ cartElem.checkboxes[i].checked='true'; cartElem.checkboxes[i].setAttribute('check','yes'); cartElem.checkboxAll.checked='true';遍历的时候这个设置属性为true也是不要加引号吗？一般什么情况加引号什么情况不加引号？

2019-01-08 10:20:16
好帮手慕星星回复提问者小章鱼丸 #2

checked属性值是布尔值，如果加引号就变成了字符串，从而不起作用。所以设置值的时候要看这个属性的值是什么类型的，再进行设置就会避免问题。

2019-01-08 10:39:24