目的:
当复选框组中的第一项被选中时,显示红色线框标出的部分;若复选框组中的第一项未被选中,红色线框区域内的内容不显示
- xml部分代码如下:
<view class="weui-flex">
<view class="weui-flex__item">
<view class="placeholder">
<view class="wehx-custom_title">保险</view>
<checkbox-group bindchange="checkboxChange" class="wehx-custom_content weui-flex">
<label class="checkbox" wx:for="{{items}}" wx:key="{{index}}" class="weui-flex__item">
<checkbox value="{{item.name}}" wx:key="{{index}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
</view>
</view>
</view>
<block wx:if="{{aa==true}}">
<view class="weui-flex">
<view class="weui-flex__item" bindchange="bindDateChange">
<view class="placeholder">
<view class="wehx-custom_title">做箱日期</view>
<view class="wehx-custom_content">
<picker mode="date" value="{{useContainerDate}}">
<view class="picker">
{{useContainerDate}}
<text class="iconfont iconfont-gray icon-jiantou"></text>
</view>
</picker>
</view>
</view>
</view>
</view>
<view class="weui-flex">
<view class="weui-flex__item">
<view class="placeholder">
<view class="wehx-custom_title">金额</view>
<view class="wehx-custom_content">
<input class="weui-input" value='' bindinput='outPlateNoInput' bindblur='outPlateNoInput' placeholder="请输入金额" placeholder-class="wehx-input_placeholder" />
</view>
</view>
</view>
</view>
</block>
- js部分代码如下:
data: {
//使用一份保险和买两份保险
items: [
{ name:"使用一份保险", value: '使用一份保险'},
{ name:"购买两份保险", value: '购买两份保险',},
],
aa:false,//默认不使用
//做箱日期
useContainerDate: util.formatDate(new Date()),
},
//复选框事件
checkboxChange: function (e) {
console.log('checkbox发生change事件,携带value值为:', e.detail.value)
this.setData({
aa:e.detail.value.indexOf('使用一份保险')!==-1?true:false
// 找不到的时候true 找到的时候false
})
},