小程序如何实现复选框选中显示对应图片

问题描述：

运用同一个JS动作，如何显示不同图片
js：

Page({
onTap(){
this.setData({showPic: !this.data.showPic});
}
})

xml：


<view>亲肤面料材质</view>
<checkbox-group>
    <label>
        <checkbox type="primary" bindtap="onTap" id="">{{showPic?'冰丝透心凉':"冰丝透心凉"}}</checkbox>          
    </label>
    <label>
        <checkbox type="primary" bindtap="onTap">{{showPic?'百分百纯棉面料':"百分百纯棉面料"}}</checkbox>         
    </label>
    <label>
        <checkbox type="primary" bindtap="onTap">{{showPic?'test3':"test3"}}</checkbox>   
    </label>
    <label>
        <checkbox type="primary" bindtap="onTap">{{showPic?'test4':"test4"}}</checkbox>   
    </label>
</checkbox-group>
<checkbox-group>
    <label>
        <checkbox type="primary" bindtap="onTap">{{showPic?'test5':"test5"}}</checkbox>   
    </label>
</checkbox-group>
<image hidden="{{!showPic}}" src="http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSHKDRfaSicL030ccVPccfic6cickPEq9A8LmchHibmBeBuDYJEXtyPr3rYAAmVPuoicksxTBTDTvgAQgKw/0?wx_fmt=jpeg"></image>
<image hidden="{{!showPic}}" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ce6b5b56c3fda8012036be333fed.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636689154&t=068da9220842c93e009a90825cb71303"></image>

答

data增加状态数组indexs，wxml改这样，新增data-index属性，然后image的hidden通过判断indexs状态值来显示隐藏
有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~

<view>亲肤面料材质</view>
<checkbox-group>
    <label>
        <checkbox type="primary" bindtap="onTap" id="" data-index="0">{{showPic?'冰丝透心凉':"冰丝透心凉"}}</checkbox>          
    </label>
    <label>
        <checkbox type="primary" bindtap="onTap" data-index="1">{{showPic?'百分百纯棉面料':"百分百纯棉面料"}}</checkbox>         
    </label>
    <label>
        <checkbox type="primary" bindtap="onTap" data-index="2">{{showPic?'test3':"test3"}}</checkbox>   
    </label>
    <label>
        <checkbox type="primary" bindtap="onTap" data-index="3">{{showPic?'test4':"test4"}}</checkbox>   
    </label>
</checkbox-group>
<checkbox-group>
    <label>
        <checkbox type="primary" bindtap="onTap" data-index="4">{{showPic?'test5':"test5"}}</checkbox>   
    </label>
</checkbox-group>
<image hidden="{{!indexs[0]}}" src="http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSHKDRfaSicL030ccVPccfic6cickPEq9A8LmchHibmBeBuDYJEXtyPr3rYAAmVPuoicksxTBTDTvgAQgKw/0?wx_fmt=jpeg"></image>
<image hidden="{{!indexs[1]}}" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ce6b5b56c3fda8012036be333fed.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636689154&t=068da9220842c93e009a90825cb71303"></image>

Page({
  data:{indexs:[]},//显示状态数组
  onTap(e){
    var index=e.currentTarget.dataset.index;
    var indexs=this.data.indexs;
    indexs[index]=indexs[index]?0:1;//取反
    this.setData({indexs: indexs});//
  }
  })

小程序如何实现复选框选中显示对应图片

相关推荐