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

wxml文件代码如下:

html 复制代码
<!--页面顶部 引入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代码如下:

javascript 复制代码
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.value
	  if (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 文件

文件代码如下:

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

注:微信小程序提到:WXS(WeiXin Script)是内联在 WXML 中的脚本段。通过 WXS 可以在模版中内联少量处理脚本,丰富模板的数据预处理能力。另外, WXS 还可以用来编写简单的 WXS 事件响应函数

相关推荐
狂团商城小师妹16 小时前
JAVA露营基地预约户外露营预约下单系统小程序
java·开发语言·微信小程序·小程序
知识分享小能手18 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
计算机毕业设计小帅21 小时前
【2026计算机毕业设计】基于Springboot的汉服交流的微信小程序
spring boot·微信小程序·课程设计
OEC小胖胖1 天前
组件化思维(下):表单与交互组件,倾听用户的心声
前端·微信小程序·小程序·微信开放平台
云起SAAS2 天前
老年ai模拟恋爱抖音快手微信小程序看广告流量主开源
人工智能·微信小程序·小程序·ai编程·看广告变现轻·老年ai模拟恋爱·ai模拟恋爱
宠友信息2 天前
类似小红书垂直社区APP小程序源码
java·开发语言·微信小程序·小程序·uni-app·开源·web app
Stanford_11062 天前
关于单片机的原理与应用!
c++·单片机·嵌入式硬件·微信小程序·微信公众平台·微信开放平台
OEC小胖胖2 天前
交互的脉络:小程序事件系统详解
前端·微信小程序·小程序·微信开放平台
毕设源码-邱学长2 天前
【开题答辩全过程】以 “勤工有道”微信小程序为例,包含答辩的问题和答案
微信小程序·小程序