uni-app 多选框判断是否选中

最新推荐文章于 2025-09-07 10:45:00 发布

原创最新推荐文章于 2025-09-07 10:45:00 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了一种在微信小程序中实现多选框的方法。通过使用<checkbox-group>组件及对应的事件处理函数，实现了两个选项的切换选择。此外，通过data属性定义了状态变量来控制多选框的状态。

<view class="list">
				<checkbox-group @change="checkboxChange(1)">
					<label>
						<checkbox :checked="state" color="#FFCC33"  style="transform:scale(0.7)"  />字
					</label>
				</checkbox-group>
				
				<checkbox-group @change="checkboxChange(2)">
					<label>
						<checkbox :checked="statee" color="#FFCC33" style="transform:scale(0.7)" />号
					</label>
				</checkbox-group>
</view>

data() {
			return {
				state:false,
				statee:false
			}
},

//多选框
			checkboxChange(i){
				if(i ==1){
					console.log(!this.state)
					this.state = !this.state;
				}else{
					this.statee = !this.statee;
				}
			},