当前位置：首页 > news >正文

微信小程序 checkbox 实现双向绑定以及特殊交互处理

news 2025/6/27 6:47:11

wxml文件代码如下：

<!--页面顶部 引入wxs文件-->
<wxs module="tools" src="../../filter/tools.wxs"></wxs>
...
<checkbox-group bindchange="checkboxChange"><label class="weui-cell weui-check__label" wx:for="{{cancerItems}}" wx:key="value"><view class="weui-cell__hd"><checkbox value="{{item.value}}" checked="{{tools.getIncludes(checkedCancers, item.value)}}"/></view><view class="weui-cell__bd">{{item.name}}</view></label>
</checkbox-group>

js代码如下：

Page({data: {// 癌种cancerItems: [{value: 'fou', name: '否'},{value: 'fei', name: '肺癌'},{value: 'ruxian', name: '乳腺癌'},{value: 'wei', name: '胃癌'},{value: 'gan', name: '肝癌'},{value: 'qita', name: '其他'}],checkedCancers: [], // 选择的癌种},checkboxChange (event) {console.log('event', event)let checkedVal = event.detail.valueif (checkedVal[checkedVal.length - 1] === 'fou') { // 如果用户选择了“否”，则其他癌种清空checkedVal = ['fou']} else { // 如果选择癌种或者“其他”，“否”取消选择const index = checkedVal.indexOf('fou')if (index > -1) {checkedVal.splice(index, 1)}if (checkedVal.includes('fou')) { // 如果选择“其他”//}}this.setData({checkedCancers: checkedVal})}
})

所谓tool.getIncludes 方法需要引入 tool.wxs 文件
文件代码如下：

var tools = {getIncludes: function(val, target) {if(!val) returnif(val.indexOf(target) > -1) {return true} else {return false}}
}
module.exports = {getIncludes: tools.getIncludes
}