微信小程序判断某个checkbox是否选中（在非checkboxchange事件中）

做购物车的小程序时，点击已被选中的某个商品的加号时

总计的价格也要跟随商品数量的增加而累加，也就是这个加号的点击事件里，我们要判断当前商品是否是选中状态：我的方法是在checkbox发生改变时，在data中设置一个对应的变量存储当前checkbox的选中状态，可是商品那么多，一个变量肯定是不行的，所以要用数组来存：（数组的索引对应checkbox的索引）
代码已经尽量给全了，其实这里最重要的是

this.setData({['checkstatus['+checkid+']']: true,});

用中括号括起来，小程序的变量名就可以用变量来表示了

下面是我的代码
模拟数据：

// 模拟数据
var posts_goodsinfo = [{pic: 'http://img.hb.aicdn.com/c1fc35df63be17c0b0a23d13a12dbf5697fa5c3227b6c-QBcOiv_fw658', title: '吐鲁番番茄', detail: '秘鲁蓝莓2盒(约125g/盒) 新鲜水果 蓝莓鲜果', weight: '500g', price: 400.00, postid: 1, status: '缺货', count: 4, checked: false, goodsimg:'http://img.hb.aicdn.com/ce1d3867242705f49d216d7fe2429fdde08920ce7e7fa-qsobM7_fw658'},{pic: 'http://img.hb.aicdn.com/9175fa3d1f28872eb676352f5c175d00089987cc3d06e-GQfBhL_fw658', detail: '四川汉源花椒麻椒大红袍干红花椒卤料调料配料【250克】特产包邮', weight: '500g', price: 400.00, postid: 2, status: '有货', count: 1, checked: true, goodsimg: 'http://img.hb.aicdn.com/136072271f766f9f95c8e82294fc611f03f95db631b31b-rwJLCJ_fw658'}, {pic: 'http://img.hb.aicdn.com/ac28f1d1e4d092d87a9d2b1844082edffc75c63f3b9e4-5fRQAr_fw658', detail: '2斤装8-12个进口普吉岛去皮小菠萝泰国削皮迷你新鲜菠萝顺丰包邮 ', weight: '500g', price: 400.00, postid: 3, status: '有货', count: 6, checked: false, goodsimg:'http://img.hb.aicdn.com/04cfc246a2ec0b01291ac5e41be3d36335764a0321fec1-db27zg_fw658'},{pic: 'http://img.hb.aicdn.com/9fa49fb48f3002fcc27f35c4daacece2a4457889278bc-TKg5lE_fw658', detail: '天勤新鲜有机甜糯玉米棒粘黏糯米小真空速食营养早餐粗粮10支', weight: '500g', price: 400.00, postid: 4, status: '有货', count: 1, checked: false, goodsimg:'http://img.hb.aicdn.com/8e6576a1b1868d1bafd6be258c9a2621d33f224b140ca6-eBqDf2_fw658'}, {pic: 'http://img.hb.aicdn.com/287e45caaf9771aa2e8e38f0da754b7c3b99de29b829a-fkEg4U_fw658', detail: '甘福园 四川攀枝花凯特芒果 新鲜当季水果大青芒整箱10斤批发包邮', weight: '500g', price: 400.00, postid: 5, status: '有货', count: 2, checked: false, goodsimg:'http://img.hb.aicdn.com/88b23842ad04f696500073b0e50809091efd283e8a979f-gT7pdE_fw658'},{pic: 'http://img.hb.aicdn.com/7c9d40ee7d3b76d90bd45ed145bbfe110e76056d17ca1-hzSmev_fw658', detail: '现货南非西柚8个大果葡萄柚红心柚子新鲜水果孕妇进口当季时令干', weight: '500g', price: 400.00, postid: 6, status: '有货', count: 1, checked: false, goodsimg:'http://img.hb.aicdn.com/b1f11c8c396bd2303cf8d99e27bf57cd5b274711292431-USFfSJ_fw658'}
];
var posts_favourable = [{favid: 1, name: "未使用", value: 0 }, { favid: 2, name:'20元店铺优惠券',value:20}];
var posts_address = [{addressid: 1, name: "陈雅婷", tel: "17756446937", province: "安徽省", city: "六安市", county:"金安区",detail:"开发区大学科技园"},{ addressid: 2,name: "何远浩", tel: "12345678901", province: "安徽省", city: "六安市", county: "金安区", detail: "开发区大学科技园" }
]
var posts_cart = [{pic: 'http://img.hb.aicdn.com/7c9d40ee7d3b76d90bd45ed145bbfe110e76056d17ca1-hzSmev_fw658', detail: '现货南非西柚8个大果葡萄柚红心柚子新鲜水果孕妇进口当季时令干', weight: '500g', price: 400.00, postid: 6, status: '有货', count: '1', checked: false, goodsimg: 'http://img.hb.aicdn.com/b1f11c8c396bd2303cf8d99e27bf57cd5b274711292431-USFfSJ_fw658'
}, {pic: 'http://img.hb.aicdn.com/9fa49fb48f3002fcc27f35c4daacece2a4457889278bc-TKg5lE_fw658', detail: '天勤新鲜有机甜糯玉米棒粘黏糯米小真空速食营养早餐粗粮10支', weight: '500g', price: 400.00, postid: 4, status: '有货', count: '1', checked: false, goodsimg: 'http://img.hb.aicdn.com/8e6576a1b1868d1bafd6be258c9a2621d33f224b140ca6-eBqDf2_fw658'}, {pic: 'http://img.hb.aicdn.com/287e45caaf9771aa2e8e38f0da754b7c3b99de29b829a-fkEg4U_fw658', detail: '甘福园 四川攀枝花凯特芒果 新鲜当季水果大青芒整箱10斤批发包邮', weight: '500g', price: 400.00, postid: 5, status: '有货', count: '2', checked: false, goodsimg: 'http://img.hb.aicdn.com/88b23842ad04f696500073b0e50809091efd283e8a979f-gT7pdE_fw658'}]
module.exports = { postlist: posts_goodsinfo,postfav: posts_favourable,postaddress: posts_address ,postcart: posts_cart//给这个数组变量赋值，让这个数组可以通过这个exports出去
}

wxml：

<!--pages/cart/cart.wxml-->
<view class='cart_bg'><text class='cart_name'>购物车</text>
</view>
<scroll-view class="Wrapscroll-view" data-c_e_id="wx_scroll_view_18790ec8" lower-threshold="50" scroll-y="True"  style="overflow-x: hidden; overflow-y: auto; " upper-threshold="50">
<view class='cart_card_box'>
<block wx:for="{{postsList}}"><view class='cart_card' catchtap='onLinkDetail' data-post="{{item.postid}}" ><checkbox-group bindchange="checkboxChange" catchtap='onStopEvent' data-checkid='{{index}}'><checkbox class='cart_checkbox' bindtap='onCalcSelect' catchtap='onStopEvent'  checked="{{selectedAllStatus}}" ></checkbox></checkbox-group><image src='{{item.pic}}' class='cart_card_img' model="aspectFit"></image><view class='cart_card_detail'><image src='/images/can.png' class='delate' catchtap='bindDelateGoods' data-delate='{{index}}'></image><text class='detail_text'>{{item.detail}}</text><text class='detail_price'>￥{{item.price}}</text><view class='stepper'><text type='number'  catchtap='bindMinus' data-index='{{index}}'>-</text><input bindinput='bindManual' value='{{item.count}}' disabled></input><text catchtap='bindPlus' data-index='{{index}}' data-checked='{{status}}'>+</text></view></view></view>
</block>
</view>
</scroll-view>
<view class='bottom_bar'>
<checkbox-group bindchange="bindCalcAll"><checkbox class='all_checkbox' catchtap='bindSelectAll' checked='{{tag}}'></checkbox>
</checkbox-group><view class='rightall'><text>总计：</text><text class='red'>￥{{sum}}</text><button catchtap='onCalcSelect'>结算</button></view>
</view>

js:

var postData = require('../../common.js');
var flag = 0;
// pages/cart/cart.js
Page({/*** 页面的初始数据*/data: {selectedAllStatus:false,sum: 0,checkstatus:[],buylist:[0,1]},//事件处理函数/*点击减号*/bindMinus: function (event) {var index = event.currentTarget.dataset.index;var postList = this.data.postsList;var num = postList[index].count;var that = num;if (num > 1) {num--;}postList[index].count=num;this.setData({postsList:postList}); //判断当前商品是否被选中// console.log(event)if (this.data.checkstatus[index] == true) {var sum = this.data.sum;sum = sum - (that - num) * postList[index].price;this.setData({sum: sum,});} },/*点击加号*/bindPlus: function (event) {var index = event.currentTarget.dataset.index;var postList = this.data.postsList;var num = postList[index].count;var that=num;num++;postList[index].count = num;this.setData({postsList: postList});var checkid='checkid'+index//判断当前商品是否被选中if (this.data.checkstatus[index] == true){var sum = this.data.sum;sum = sum + (num - that) * postList[index].price;this.setData({sum: sum,});};console.log(this.data)},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({postsList: postData.postcart});},/*** 单个复选框的选中、取消事件*/checkboxChange: function(e) {if(e.detail.value.length==1) {var checkid=e.target.dataset.checkid;var sum = this.data.sum;var postsList = this.data.postsList;sum=sum+postsList[checkid].price*postsList[checkid].count;this.setData({sum:sum,['checkstatus['+checkid+']']: true,});//判断是否所有商品都被选中var checkstatus = this.data.checkstatus;var p=truefor (var i = 0;i<postsList.length;i++) {if (checkstatus[i] == false || checkstatus[i] ==undefined){p=false;};};if(p) {this.setData({tag: true});}else {this.setData({tag: false});};}else{var checkid = e.target.dataset.checkid;var sum = this.data.sum;var postsList = this.data.postsList;sum = sum - postsList[checkid].price * postsList[checkid].count;this.setData({sum: sum,['checkstatus[' + checkid + ']']: false,//取消勾选后将全选置falsetag: false});};console.log(this.data.checkstatus);},/*** 全选事件（全选按钮和计算总价）*/bindCalcAll: function (e) {var postsList = this.data.postsList;var checkstatus=[];var sum = 0;if (e.detail.value.length == 1) {for (var i = 0; i < postsList.length; i++) {sum=sum+postsList[i].price*postsList[i].count;checkstatus[i]=true;};this.setData({sum:sum,selectedAllStatus: true,checkstatus:checkstatus})}else{for (var i = 0; i < postsList.length; i++) {checkstatus[i] = false;};this.setData({sum: sum,selectedAllStatus: false,checkstatus: checkstatus})}},//删除事件bindDelateGoods: function(e) {var that=this;wx.showModal({title: '提示',content: '确认删除这件商品吗',success: function (res) {if (res.confirm) {var delateid = e.target.dataset.delateid;var postsList = that.data.postsList;postsList.splice(delateid, 1);that.setData({postsList: postsList})} else {console.log('用户点击取消')}}})},//跳转事件onLinkDetail: function(e) {var postid = e.currentTarget.dataset.post;console.log(postid)wx.navigateTo({url: '../detail/detail?id=' + postid,})},//结算onCalcSelect: function(e) {var checkstatus = this.data.checkstatus;var cartlist = this.data.postsList;var cartarray=[]for (var i = 0; i < checkstatus.length;i++) {if (checkstatus[i]===true) {cartarray.push(cartlist[i].postid);} };if (cartarray.length!=0){var model = JSON.stringify(cartarray);console.log(model)wx.navigateTo({url: '../buyit/buyit?cartlist=' + model,});}; },//阻止事件冒泡onStopEvent:function(){},
})

wxss:

/* pages/cart/cart.wxss */
.Wrapscroll-view {padding:0;
position:fixed;
background:#ebebeb;
top:100rpx;
padding-bottom:200rpx;
}
.cart_bg {
background:#ecc30d;
width:750rpx;
height:100rpx;
position:fixed;
top:0;
font-size: 16px;
}
.cart_bg .cart_name {color:#464544;text-align: center;display:block;font-size: 18px;line-height: 100rpx;
}
.cart_bg .cart_quantity {font-size:14px;padding-left:20rpx;color:#464544;margin-top:17rpx;display:block;
}
.cart_bg .cart_edit {position: absolute;top: 25rpx;display: inline-block;font-size: 16px;color: #464544;right: 20rpx;
}
.cart_card_box {position:absolute;width:750rpx;
}
.cart_card {
width:700rpx;
margin:30rpx auto;
background:#fff;
border-radius:15px;
display:block;
height:232rpx;
position:relative;
}
.cart_card_img {
width:180rpx;
height:180rpx;
margin:26rpx 20rpx;
margin-left:66rpx;
}
/*主容器*/
.stepper {
width:180rpx;
height:54rpx;
border:1px solid #ccc;
border-radius:3px;
position:absolute;
right:10rpx;
bottom: 0;
}
/*加号和减号*/
.stepper text {
float:left;
width:50rpx;
line-height:50rpx;
text-align:center;
color: #ccc;
}
/*数值*/
.stepper input {display: inline-block;width:38px;
height:50rpx;
float:left;
margin:0 auto;
text-align:center;
font-size:12px;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
color:#333;
}
.cart_card_detail {
float:right;
width:406rpx;
display:flex;
flex-direction:column;
align-items:;
margin:26rpx 0;
height:180rpx;
margin-top:26rpx;
margin-right:20rpx;
position: relative;
}
.cart_card_detail .delate {
position:absolute;
width:60rpx;
height:60rpx;
right:10rpx;
top:34rpx;
}
.cart_card_detail .detail_text {
font-size:13px;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
margin:8px 0;
min-height:35px;
text-align:left;
width:277rpx;
}
.cart_card_detail .detail_price {font-size:16px;color:red;position:absolute;bottom:10rpx;left:0;
}
/*  重写 checkbox 样式  */
/* 未选中的 背景样式 */
checkbox .wx-checkbox-input{border-radius: 50%;/* 圆角 */width: 40rpx; /* 背景的宽 */height: 40rpx; /* 背景的高 */
}
/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{border: none;background: red;
}
/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{border-radius: 50%;/* 圆角 */width: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */height: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */line-height: 40rpx;text-align: center;font-size:30rpx; /* 对勾大小 30rpx */color:#fff; /* 对勾颜色 白色 */background: transparent;transform:translate(-50%, -50%) scale(1);-webkit-transform:translate(-50%, -50%) scale(1);
}
.cart_checkbox {
position:absolute;
left:10rpx;
height:232rpx;
line-height:232rpx;
}
.bottom_bar {
width:750rpx;
height:100rpx;
background:#fff;
position:fixed;
bottom:0;
border-top:1px solid #eee;
}
.bottom_bar .all_checkbox {position:absolute;
top:30rpx;
left:35rpx;
}
.bottom_bar .rightall {float: right;
}
.bottom_bar .rightall text {
height:100rpx;
display:inline-block;
line-height:100rpx;
vertical-align:bottom;
font-size:14px;
}
.bottom_bar .rightall .red {color: red;margin-right:15rpx;
}
.bottom_bar .rightall button {
display:inline-block;
height:100rpx;
vertical-align:bottom;
width:135rpx;
background:#ECC30D;
border-radius:0;
font-size:16px;
line-height: 100rpx;
color: #333;
}
button::after {border: none;
}

微信小程序判断某个checkbox是否选中（在非checkboxchange事件中）相关推荐

微信小程序---判断苹果11及以上型号手机
微信小程序-判断苹果11及以上型号手机在app,js全局中 onLaunch: function () {var t = this;wx.getSystemInfo({success: functi ...
微信小程序判断手机机型信息及dpr
微信小程序判断手机机型信息及dpr=2.3 出现这个原因是因为手机dpr不同,导致在显示二维码时出现位置偏移.首先能想到的就是获取设备信息,根据不同机型而解决问题. 1.wxml 开控制位置间距var ...
微信小程序css鼠标上去变色,微信小程序实现默认第一个选中变色效果
效果图: 这里默认第一个选中点击每个不会改变样式根据index来实现 wxml: 页面class有三目运算 {{item.num}} wxss: _left 蓝色 left 黑色 .box{ wi ...
微信小程序判断数组是否为空
微信小程序判断数组是否为空 var array = [] if (array.length == 0) { console.log( '数组为空' ) } else {console.log('数组不 ...
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转举例: main.js中: tabBar中定义了页面"pages/test/main&qu ...
uni-app 微信小程序获取位置信息提示“getLocation 需要在 app.json 中申明 permission 字段”
本文同步发布在:uni-app 微信小程序获取位置信息提示"getLocation 需要在 app.json 中申明 permission 字段我们在用 uni-app 开发微信小程序时, ...
微信小程序如何实现通过js修改wxml的for循环中的属性值
微信小程序如何实现通过js修改wxml的for循环中的属性值要实现的效果具体代码要实现的效果点击每一个活动选项,实现显示对应的操作按钮具体代码首先要在对应页面的js中给data中定义数组, ...
微信小程序获取多选框选中值和选中值对应的id
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 官方文档中只有获取多选框的值的方法,但是我需要获取选中的值同时还要获取选中值对应的id,但是又不能操作DOM获 ...
微信小程序判断input是否为空
微信小程序中用到input值时候,判断其内容是否为空,可以用if-else判断内容的length,也可以给input加点击事件,判断其内容:以下是我解决问题的过程 wxml代码 <view cl ...

微信小程序判断某个checkbox是否选中（在非checkboxchange事件中）

微信小程序判断某个checkbox是否选中（在非checkboxchange事件中）相关推荐

最新文章

热门文章