微信小程序自定义单选框样式实现单选功能_javascript技巧_

// index.js Page({   /**    * 页面的初始数据    */   data: {     list: [{         img: "../../image/car.png",         name: "小车",         type: "C1/C2/C3",         checked: true,       },       {         img: "../../image/trucks.png",         name: "货车",         type: "A2/B2",         checked: false,       },       {         img: "../../image/passenger-car.png",         name: "客车",         type: "A1/A3/B1",         checked: false,       },       {         img: "../../image/motorbike.png",         name: "摩托车",         type: "D/E/F",         checked: false,       }     ],   },   // 选择   choose: function (e) {     let index = e.currentTarget.dataset.id;     let list = this.data.list;     for (let i = 0; i < list.length; i++) {       this.data.list[i].checked = false;     }     if (list[index].checked) {       this.data.list[index].checked = false;     } else {       this.data.list[index].checked = true;     }     this.setData({       list: this.data.list     })   }, })

                      {{item.name}}       {{item.type}}       

 /* wxss */ .chooseType {   width: 100%;   height: 200rpx;   display: flex;   align-items: center;   justify-content: space-between;   border-bottom: rgb(197, 196, 187) 1rpx solid;   font-size: 30rpx;   background: #FFFFFF; } .chooseType-content-img{   width: 90rpx;   height: 90rpx; } .chooseType-content{   width: 25%;   height: 100%;   display: flex;   align-items: center;   flex-direction: column; } .chooseType-content-select{   width: 25%;   height: 100%;   display: flex;   align-items: center;   flex-direction: column;   background: rgb(163, 162, 162,0.2); } .chooseType-content-type{   margin-top: 10rpx;   font-size: 30rpx;   color: #b3b0b0; }