微信小程序实现多选框全选操作
更新时间:2022年07月18日 14:10:08 作者:凡小多
这篇文章主要为大家详细介绍了微信小程序实现多选框全选操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现多选框全选的具体代码,供大家参考,具体内容如下
test.wxml
<view class="container">
<!-- 多选框 -->
<view class="page-body">
<view class="page-section">
<view class="page-section-title">推荐展示样式</view>
<view class="weui-cells weui-cells_after-title">
<checkbox-group bindchange="checkboxChange">
<label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
<view class="weui-cell__hd">
<checkbox value="{{item.value}}" checked="{{item.checked}}" />
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</checkbox-group>
</view>
</view>
</view>
<text>全选</text>
<checkbox-group bindchange="checkboxAll">
<checkbox checked="{{checkedAll}}" />
</checkbox-group>
</view>test.js
Page({
data: {
checkedAll: "",
items: [{
value: 'USA',
name: '美国'
},
{
value: 'CHN',
name: '中国',
checked: 'true'
},
{
value: 'BRA',
name: '巴西'
},
{
value: 'JPN',
name: '日本'
},
{
value: 'ENG',
name: '英国'
},
{
value: 'FRA',
name: '法国'
}
]
},
checkboxChange(e) {
console.log('checkbox发生change事件,携带value值为:', e.detail.value)
const items = this.data.items
const values = e.detail.value
for (let i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false
for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
if (items[i].value === values[j]) {
items[i].checked = true
break
}
}
}
this.setData({
items
})
if (e.detail.value.length == 6) {
console.log(this.data.checkedAll);
this.setData({
checkedAll: true
})
}else{
this.setData({
checkedAll: ""
})
}
},
checkboxAll(e) {
if (e.detail.value.length == 1) {
// 全选状态
const items = this.data.items
for (let i = 0; i < items.length; i++) {
items[i].checked = true
}
this.setData({
items
})
} else {
// 没有全选状态
const items = this.data.items
for (let i = 0; i < items.length; i++) {
items[i].checked = false
}
this.setData({
items
})
}
}
})效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
JS跳出循环的方法区别对比分析(break,continue,return)
面向对象编程语法中我们会碰到break ,continue, return这三个常用的关键字,那么关于这三个关键字的使用具体的操作是什么呢?接下来通过本文给大家讲解JS跳出循环的方法区别对比分析(break,continue,return),感兴趣的朋友一起看看吧2023-02-02
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
这篇文章主要介绍了浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号的相关资料,需要的朋友可以参考下2016-03-03
教你修改element-ui源码给el-dialog添加全屏功能
el-dialog组件提供了fullscreen功能,但是无法满足业务需求。系统使用了许多dialog,不方便重新封装dialog组件,故直接对源码进行修改,这篇文章主要介绍了修改element-ui源码给el-dialog添加全屏功能,需要的朋友可以参考下2022-11-11


最新评论