微信小程序多选单机变色

微信小程序选中与未选中的样式实现多选框

 <view><checkbox-group name="checkbox" class="check"><label bindtap='clicks' wx:for="{{checks}}" wx:key="{{checks}}" wx:for-index="index" data-index="{{index}}" class='{{item.checked?"is_checked":""}}'><checkbox value="{{item.name}}" data-val="{{item.name}}" hidden='false' checked='{{item.checked}}' /> {{item.name}}</label></checkbox-group><input style='display:none' maxlength="20" name="roomlabel" placeholder='请输入职位名称' value=" {{checks[name]}}" /></view>

css

label{border:2rpx solid #aaaaaa;
}
.check {display:flex;flex-wrap:wrap;justify-content:space-around;}
.check label {width: 120rpx;height: 60rpx;border-radius: 8rpx;/* background-color: #fff;   */display: flex;align-items: center;margin: 0 5rpx;justify-content: center;/* color: #aaa; */margin-top: 20rpx;
}
.is_checked {background-color: #14a1fd;opacity: 0.4;color: #fff;border: 2rpx solid #fff;
}
.is_checked>checkbox {color: red;
}

js部分
checked状态可以去动态添加

data: {checks: [{ name: "投影仪", value: '0', checked: false },{ name: "电视机", value: '1', checked: false },{ name: "空调", value: '2', checked: false },{ name: "Wifi", value: '3', checked: false },{ name: "电脑", value: '4', checked: false },{ name: "舞把杆", value: '5', checked: false },{ name: "镜面墙", value: '6', checked: false },{ name: "音响", value: '7', checked: false },{ name: "桌椅", value: '8', checked: false },{ name: "其他", value: '9', checked: false }]},

clicks: function (e) {let index = e.currentTarget.dataset.index;let arrs = this.data.checks;if (arrs[index].checked == false) {arrs[index].checked = true;} else {arrs[index].checked = false;}this.setData({checks: arrs})// console.log(e)}

微信小程序多选单机变色相关推荐

微信小程序勾选协议与提交按钮联动
微信小程序勾选协议与提交按钮联动在一些小程序的开发中有时会实现,未勾选相关协议,提交按钮是禁用状态,勾选相关协议,提交按钮变成可用状态.如下图所示: 主要用到开发文档按钮组件的一个属性: 代码: w ...
微信小程序全选，微信小程序checkbox，微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
微信小程序影院选座界面前后端
选座界面使用了组件开发,在seat页面里引入seatList组件.因为不想再去看怎么从组件中获取数据,因此这整个页面就是一个组件... 本文前端部分参考于:微信小程序组件开发--可视化电影选座 - ...
微信小程序css鼠标上去变色,微信小程序实现默认第一个选中变色效果
效果图: 这里默认第一个选中点击每个不会改变样式根据index来实现 wxml: 页面class有三目运算 {{item.num}} wxss: _left 蓝色 left 黑色 .box{ wi ...
基于微信小程序电影院选座订票系统计算机毕设源码26840
摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,电影院选座订票系统小程序被用户普遍使用,为方 ...
微信小程序多选复选框checkbox。微信小程序官方文档bug
由于个人从事微信小程序开发相关工作,在查询相关文档时(微信官方文档-小程序-表单组件-checkbox),发现示例代码中的一处错误. 问题出现原因:根据文档示例代码提示,设置本人本地代码,却发现下图红 ...
微信小程序多选标签的实现（单选或者多选）
暑假留在社团跟别人一起开发一个校园小程序,如今也基本快开发完成了,整理一下日后可能用到的小组件. 类似于上图,下方的待选项为一个组件,根据父组件传入传入的参数决定是否为多选. 父组件的HTML代码如下 ...
微信小程序多选组件封装
项目需要,封装了一个多选组件,有参考其他文章,出处忘记了,在那基础上以项目需求为目标做改进,以下是效果图. 效果图代码位置首先是弹出框的代码(multipleSelection) wxml < ...
微信小程序多选框圆角修改
.van-checkbox__icon-wrap {border-radius: 8rpx; }.van-checkbox__icon {border-radius: 8rpx; }

微信小程序多选单机变色

微信小程序多选单机变色相关推荐

最新文章

热门文章

微信小程序 多选单机变色

微信小程序 多选单机变色相关推荐

最新文章

热门文章

微信小程序多选单机变色

微信小程序多选单机变色相关推荐