js开发15 基于复选框checkbox 的商品结算列表的实践原创

noutsider

发布于 2021-2-9 17:39

浏览

0收藏

1.复选框 checkbox :可以从选项表中选择一项或者多项.

2.<input type="checkbox" value="取值" checked="true/false">

3.checked属性控制物品是否被选中,不设置checked是默认不选被选中的,一旦设置checked = false或者checked="true"或者checked = true,都会被解释为选中

4.复选框是没有文本的,但可以加入 label 标签.例如:<label for="checkbox1">全选</label>

js开发15 基于复选框checkbox 的商品结算列表的实践-鸿蒙开发者社区

5.在购物车里面通常有一个全选的复选框,点击全选,所有商品全部勾选.接下来我们就实现这个功能.

checked的事件为onchange,实现思路为定义一个变量获取它的值true/false,运用if语句,当选中为true时,嵌套for循环,遍历整个数组.将true赋值给数组中的checked.这样就实现了点击全选的功能.相反,要实现全不选的功能,和上面时一模一样的

   checkall(e){
        //定义变量获取true false
        let ck=e.checked;
        if(ck){
            prompt.showToast({
                message:e.checked,
                duration:5000,
            })

            for(let i=0;i<this.list1.length;i++)
                 {
                 let books=this.list1[i];
                     books["checked"]=ck;
                 }

              }
        else{
            prompt.showToast({
                message:e.checked,
                duration:5000,
            })
            for(let i=0;i<this.list1.length;i++)
            {
                let books=this.list1[i];
                books["checked"]=ck;
            }
        }
        this.countsum()
                },1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

6. 在上述代码中我们运行了两个for循环,代码运行效率相对不高,下面时一段更简洁的代码,同样实现一样的功能.

   let ck=e.checked;
        for(let i=0;i<this.list1.length;i++)
        {
            let books=this.list1[i];
            books["checked"]=ck;
        }
1.
2.
3.
4.
5.
6.

7.在选择全选复选框时,我们还能再实现一个功能,即计算出所选商品的总金额. 基本思路:遍历整个商品数组.再做判断,当选中商品时,执行计算金额的操作. 如下:

  countsum()
    {

        let sumprice1=0;
        for(let i=0;i<this.list1.length;i++)
          {
              let books=this.list1[i];
              if(books.checked)
                {
                     sumprice1+=books.count*books.price;
                }
          }
        this.sumprice=sumprice1.toFixed(2);
    }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

完整代码如下:

js业务逻辑层:

import prompt from '@system.prompt';
export default {
    data: {
        title: 'World',
        sumprice:0,
        sumcount:0,
        list1: [{
                    "name": "通信原理",
                    "author": "樊昌信,曹丽娜",
                    "press": "国防工业出版社",
                    "img": "common/toongxin.jpg",
                    "price": "46.40",
                    "count": "1",
                    "checked": "false"
                },
                {
                    "name": "光纤通信",
                    "author": "王辉",
                    "press": "电子工业出版社",
                    "img": "common/guangqian.jpg",
                    "price": "46.",
                    "count": "1",
                    "checked": "false"
                },

                {
                    "name": "信息论与编码",
                    "author": "凯尔波特",
                    "press": "机械工业出版社",
                    "img": "common/xinxilun.jpg",
                    "price": "58",
                    "count": "1",
                    "checked": "false"
                },
                {
                    "name": "通信电子线路",
                    "author": "杨国平",
                    "press": "科学出版社",
                    "img": "common/dianzixianlu.jpg",
                    "price": "79",
                    "count": "1",
                    "checked": "false"
                },
                {
                    "name": "信号与系统",
                    "author": "郑君里",
                    "press": "高等教育出版社",
                    "img": "common/xinhao.jpg",
                    "price": "43",
                    "count": "1",
                    "checked": "false"
                },
                {
                    "name": "数字模拟电子线路",
                    "author": "闫石",
                    "press": "高等教育出版社",
                    "img": "common/shuzidianlu.jpg",
                    "price": "72",
                    "count": "1",
                    "checked": "false"
                }]
    },
    checkall(e){
        //定义变量获取true false
        let ck=e.checked;

        if(ck){
            prompt.showToast({
                message:e.checked,
                duration:5000,
            })

            for(let i=0;i<this.list1.length;i++)
                 {
                 let books=this.list1[i];
                     books["checked"]=ck;
                 }
              }
        else{
            prompt.showToast({
                message:e.checked,
                duration:5000,
            })
            for(let i=0;i<this.list1.length;i++)
            {
                let books=this.list1[i];
                books["checked"]=ck;
            }
        }
        this.countsum()
                },
    countsum()
    {

        let sumprice1=0;
        for(let i=0;i<this.list1.length;i++)
          {
              let books=this.list1[i];
              if(books.checked)
                {
                     sumprice1+=books.count*books.price;
                }
          }
        this.sumprice=sumprice1.toFixed(2);
    }
}


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.

视图渲染层:

<div class="container">
    <list class="lists">
        <block for="{{list1}}">
            <list-item class="listitem">
                <div class="oneview">
                    <input name="books" type="checkbox" checked="{{$item.checked}}">
                    </input>
                </div>
                <div class="twoview">
                    <image class="img1" src="{{$item.img}}">
                    </image>
                </div>
                <div class="threeview">
                    <div class="div1">
                        <text class="txt1">书名:{{$item.name}}</text>
                        <text class="txt1">作者:{{$item.author}}</text>
                        <text class="txt1">出版社:{{$item.press}}</text>
                        <text class="txt1">价格:¥{{$item.price}}</text>
                    </div>
                </div>
            </list-item>
        </block>
    </list>
  <div class="bottomview">
      <input type="checkbox" value="全选" onchange="checkall"></input><label>全选</label>;
     <text>商品金额:{{sumprice}}元</text>
  </div>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

css属性设置;

.container {
    width: 100%;
    height: 1200px;
    display: flex;
    flex-direction: column;
}
.list{
    width: 100%;
}
.listitem{
    width: 100%;
    height: 15%;
    border-bottom: 5px solid grey;
    
}
.oneview{
    width: 20%;
    height: 100%;
    border-right: 4px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
}
.twoview{
    width: 40%;
    height: 100%;
    border-right: 4px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
}
.threeview{
    width: 40%;
    height: 100%;
    border-right: 4px solid grey;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}
.img1{
    width:150px;
    height: 150px;
    border-radius: 15px;
}
.div1{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}
.txt1{
    font-weight: bold;
    font-family: sans-serif;
}
.bottomview{
    width: 100%;
    height: 11%;
    border-top: 3px solid lightgray;
    position: fixed;
    left: 0px;
    bottom: 0px;
    background-color: lightgray;
    display: flex;
    align-items: center;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.