小程序 之checkbox按钮选中事件

目的：
当复选框组中的第一项被选中时，显示红色线框标出的部分；若复选框组中的第一项未被选中，红色线框区域内的内容不显示

1. 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>

2. 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
    })
  },