受欢迎的博客标签

wechat-微信小程序Asp .Net Core开发实战记录-微信小程序 多选框checkbox-group的使用weui

Published

https://blog.csdn.net/tsfx051435adsl/article/details/85334062

 

https://github.com/lixin051435/HFOA/blob/0bf9d711cef5cdde40bd60b70bb2ce485be5e57c/WEIXIN/pages/operatePages/myApply/adaptable/seal/seal.wxml

原型

<checkbox-group bindchange="checkboxChange">
<checkbox value='football'>足球</checkbox>
<checkbox value='basketball' checked='true'>篮球</checkbox>
<checkbox value='baseball'>棒球</checkbox>
<checkbox value='pingpang' disabled>乒乓球</checkbox>
</checkbox-group>

 

step 1:add nav item

 <!-- 用于弹窗 -->
        <view class="weui-cell weui-cell_input" bindtap="showDialogBtn">
          <view class="weui-cell__hd">
            <view class="weui-label">公章类型</view>
          </view>
          <view style="width: 440rpx;">
            <input type="text" class="weui-input" name="sealType" value="{{sealType}}" placeholder-style="color:#B2B2B2"
              placeholder="请选择公章类型" disabled="disabled" />
          </view>
          <view class='weui-cell__ft arrow_right'></view>
        </view>

 

 

xml

step 1:初始化默认选中的数据

data中,list为数据列表,selectData为需要默认选中的数据。

 

<view class="weui-cells__title">所属门店</view>
			 <view class="weui-cells weui-cells_after-title">
        <checkbox-group name="WarehousesSelected" bindchange="bindCheckboxgroupChangeWarehouse">
          <label class="weui-cell weui-check__label" wx:for="{{WarehouseList}}" wx:key="id">
            <view class="weui-cell__hd">
              <checkbox value="{{item._id}}" checked="{{item.checked}}"/>  //值设置为_id
            </view>
            <view class="weui-cell__bd">{{item.Name}}</view>
          </label>
        </checkbox-group>
      </view>

 

	<!-- 要默认选中的数据-->
      <!--come https://blog.csdn.net/qq_41638795/article/details/100119592-->
			<wxs module="filter">
				var isChecked = function(userId, data) {
					return data.indexOf(userId) != -1 ? true : false;
				}
				module.exports = {
					isChecked: isChecked
				}
			</wxs>

			<view class="weui-cells__title">所属门店</view>
			<view class="weui-cells weui-cells_after-title">
				<checkbox-group data-index="{{index}}" name="WarehousesSelected" bindchange="bindCheckboxgroupChangeWarehouse">
					<label class="weui-cell weui-check__label" wx:for="{{WarehouseList}}" wx:key="id">
						<view class="weui-cell__hd">
							<!--值设置为_id-->
							<!--	<checkbox value="{{item._id}}" checked="{{item.checked}}" /> old-->
							<checkbox value="{{item._id}}" checked="{{filter.isChecked(item._id,WarehouseSelected)}}" />
						</view>
						<view class="weui-cell__bd">{{item.Name}}</view>
					</label>
				</checkbox-group>
			</view>

 

 

单值

https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

 

数组

https://zhuanlan.zhihu.com/p/28288848

WeUI for 小程序checkbox复选框

https://www.vxzsk.com/1886.html