微信小程序 checkbox 怎么判断是否选中

发布网友

我来回答

共3个回答

懂视网

这篇文章主要介绍了微信小程序checkbox组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文为大家分享了微信小程序checkbox组件的使用方法，供大家参考，具体内容如下

效果图

checkbox组件效果图

WXML

<view class="tui-content">
 <checkbox-group bindchange="checkboxChange">
 <label class="checkbox" wx:for="{{items}}">
 <view class="tui-menu-list"><checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}</view>
 </label>
 </checkbox-group>
 <view class="tui-show-name">
 <text wx:for="{{checkArr}}"> {{item}} </text>
 </view>
</view>

Page({
 data: {
 items: [
 { name: 'USA', value: '美国' },
 { name: 'CHN', value: '中国', checked: 'true' },
 { name: 'BRA', value: '巴西' },
 { name: 'JPN', value: '日本' },
 { name: 'ENG', value: '英国' },
 { name: 'TUR', value: '法国' },
 ],
 checkArr: ['中国']
 },
 checkboxChange: function (e) {
 var arr = [];
 e.detail.value.forEach(current => {
 for (var value of this.data.items){
 if(current === value.name){
 arr.push(value.value);
 break;
 } 
 }
 });
 this.setData({checkArr: arr});
 }
})

总结

由于e.detail.value和this.data.items都是数组元素进行属性对比查找，所以此处采用了双循环。

forEach循环不能在循环中跳出，所以在循环this.data.items时采用for…of…

上面是我整理给大家的，希望今后会对大家有帮助。

JS中的单例模式实现对数据增删改查

使用Vue仿制今日头条（详细教程）

React开发如何配置eslint

热心网友

checkbox写在checkgroup里面，checkkgroup一个bindchange事件，选中未被选中都会触发，然后js是在函数里，参数是e，e.detail.value是一个数组，有几个checkbox选中数组就有几个元素，数组元素的值是checkbox的value值可以实时监听。然后看看就知道了

热心网友

铺垫:

初始赋值(setData) isChecked默认为false.

wxml:

js:

checkboxChange:function(e){
let isChecked=e.currentTarget.dataset.checked;
if (isChecked == "false" || isChecked==false){ //即将选中将其值设为true
isChecked=true;
}else{
isChecked=false;
}
this.setData({
isChecked: isChecked
});
}

使用:

let isChecked = thi.data.isChecked; //true 为已选用,false为选中

checkgroup会比较好，但上述的更适用于将checkBox改造成Radio

全部栏目

微信小程序 checkbox 怎么判断是否选中