小程序之checkbox按钮选中事件

最新推荐文章于 2024-08-02 11:07:26 发布

原创最新推荐文章于 2024-08-02 11:07:26 发布 · 6.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

小程序专栏收录该内容

67 篇文章

订阅专栏

本文介绍了一种在小程序中实现复选框组选择特定项时显示或隐藏相关内容的方法。通过监听复选框组的change事件，判断是否选中特定项，从而控制相应区块的显示与隐藏。

目的：
当复选框组中的第一项被选中时，显示红色线框标出的部分；若复选框组中的第一项未被选中，红色线框区域内的内容不显示
在这里插入图片描述

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