单选框、多选框、全选框(多用于购物车选择)

预览图如下:
单选框、多选框、全选框(多用于购物车选择)_第1张图片
思路:
1.用for循环,把每一个列表都加上一个状态码,包括整个大的,然后设置点击方法,设置data-的独立数据,然后用三元运算判断

2.从后台获取回来的数据,把每一个列表都添加上一个状态码
var allList = that.data.listArr
for (var i = 0; i < allList.length; i++) {
for (var a = 0; a < allList[i].length; a++) {
allList[i][0].allBtn = 1;
allList[i][a].state = 1;
}
}
that.setData({
listArr: allList,
})

3.判断所有的按钮都选择了(也就是所有的单选按钮都选择了)
var bigall = that.data.listArr.length
var allsum = 0
var allover = that.data.allOrder
var list = that.data.listArr
for (var i = 0; i < bigall; i++) {
allsum += list[i][0].allBtn
if (allsum == 1 * bigall) {
allover = 1
} else {
allover = 0
}
that.setData({
allOrder: allover
})
}

4.点击某个列表的点击事件
soloChooseTap: function(e) {
var shopcart_id = e.currentTarget.dataset.solo //购物车id
var list = this.data.listArr
// 判断点击的框
for (var i = 0; i < list.length; i++) {
for (var a = 0; a < list[i].length; a++) {
if (list[i][a].shopcart_id == shopcart_id) {
if (list[i][a].state == 0) {
list[i][a].state = 1;
} else {
list[i][a].state = 0;
}
}
}
}
this.setData({
listArr: list
})

5.剩下的就是其他的点击方法了,基本都是一个意思,赋予相应状态码相应的数值

这个主要是运用for循环的多,如果有更好的方法,欢迎探讨

你可能感兴趣的:(小程序前端的功能实现)