微信小程序实现单选多选功能，自定义样式，[可限制选中的数量]

已于 2024-05-07 11:22:22 修改
阅读量6.6k 收藏 9
点赞数 5
分类专栏： 微信小程序 文章标签： 小程序单选 小程序多选 view单选多选 微信小程序多选
于 2019-03-06 10:21:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42211816/article/details/88221071
版权

小程序的组件checkbox，checkbox-group实现单选和多选功能是比较容易的，就是实际项目中考虑到页面美观和用户体验，还是选择自定义的，那么我们可以使用view组件，然后用js来处理实现跟表单的单选、多选一样的效果。

单选操作：
在这里插入图片描述

多选操作：
在这里插入图片描述

源码会持续更新到公众号，需要可以关注一下哦…
在这里插入图片描述

阿里巴啦
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
关于checkbox选择个数限制
03-17
NULL 博文链接：https://happysoul.iteye.com/blog/579678
微信小程序版多选框全选操作
小多的博客
06-26 2101
test.wxml <view class="container"> <!-- 多选框 --> <view class="page-body"> <view class="page-section"> <view class="page-section-title">推荐展示样式</view> <view class="weui-cells weui-
微信小程序 列表多选 下拉分页 滑动切换分类
tly_74125的博客
05-26 3391
卡片列表、分页、分类、滑动可切换分类、列表搜索、多选（实现微信聊天多选效果）、回写数据
微信小程序实现多选框+自定义样式（checkbox）
热门推荐
苏苏就是小苏苏的博客
10-18 1万+
1.实现效果 2.实现原理 小程序多选框 微信小程序为我们提供了checkbox-group，多项选择器，内部由多个checkbox组成。 checkbox： 3.实现代码 <!--pages/wxCase/checkbox/index.wxml--> <scroll-view scroll-x> <view class="head head1"> <view> <checkbox checked="{{select_all
微信小程序组件——多选框checkbox和标签label
小绵杨
06-18 1902
通过使用Label组件中for属性，指向checkbox的id，当点击label文字时，也会选中checkbox。 checkbox-group常用属性： bindchange="bindchange"：当点击或者取消了选中，都会触发该bindchange函数， 并且会将选中checkbox的value值传递，可在js中通过e.detail.value获取。 html代码： <view> <checkbox-group class="all" bindchange="bindchan
微信小程序实现多选功能
10-17
主要为大家详细介绍了微信小程序实现多选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序单选radio及多选checkbox按钮用法示例
11-28
本文实例讲述了微信小程序单选radio及多选checkbox按钮用法。分享给大家供大家参考，具体如下： 1.单选：radio 实例： js: Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, ...
微信小程序实现多选删除列表数据功能示例
10-17
主要介绍了微信小程序实现多选删除列表数据功能,涉及微信小程序列表数据读取、显示、删除等相关操作技巧,需要的朋友可以参考下
微信小程序日历组件（可多选单选）
01-13
可复选单选时间，可在日历上标记红蓝点，开箱即用
微信小程序checkbox 数量限制
Twoknives的博客
12-02 1461
改一个老项目，然后遇到了，记录下 先说下思路，给label绑定事件，点击时候判断是否达到限制，达到最大限制后把其他未选的禁用 <checkbox-group bindchange="check_wifi_change"> <view class='list' wx:for='{{wifiList}}' wx:key='index' wx:for-item='item'> <view class="left_L"> &l
php 微信小程序 循环 多选,微信小程序复选框实现多选一功能过程解析
weixin_34060561的博客
03-10 219
这篇文章主要介绍了微信小程序复选框实现多选一功能过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下功能实现界面data: {checkboxItems: [{ name: '全天(1-8节)', value: 'allday' },{ name: '上午(1-4节)', value: 'am' },{ name: '下午(5-8节)', va...
微信小程序如何实现一组单选和一组多选的功能（手写）
唯爱赞多的博客
12-22 1279
实现一组单选和多选的功能 微信小程序
微信小程序复选框实现 多选一功能
weixin_30822451的博客
01-23 7892
功能实现界面 data: { checkboxItems: [ { name: '全天(1-8节)', value: 'allday' }, { name: '上午(1-4节)', value: 'am' }, { name: '下午(5-8节)', value: 'pm' }, { name: '晚上(晚自习)', va...
微信小程序之标签多选效果，取消多选，wxs判断是否包含元素，标签添加删除
夜阑珊妖妖
06-17 1135
效果图： <wxs module="m1"> var baohan = function(loupanlistact,index) { var boo; var index = loupanlistact.indexOf(index) if (index <0){ boo = false; }else{ boo = true;
小程序实现单选多选功能
weixin_30484247的博客
04-27 1247
小程序的单选组件radio和多选组件checkbox的样式只提供更改颜色，这对实际项目中的需求显然是不够的，所以自己模拟实现一个。 踩坑点：小程序不支持操作dom 1、模拟实现多选框： 实现思路：思路非常简单，给每个选项绑定checked属性，类型为布尔值，点击取反即可 <!--wxml--> <view class='wrap'> <view cl...
微信小程序自定义多选
呆子小木心的博客
06-09 387
在微信小程序里面不使用checkbox怎么实现view的多选 wxml文件 <block wx:for="{{itemList}}" wx:key="id"> <view class='item_container' bindtap='itemSelected' data-index='{{index}}'> <image class='select_icon' src="{{item.isSelected?'/image/selected.png':'/imag
微信小程序 vant-weapp 实现多选标签
Jessieeeeeee的博客
08-06 1542
配置 vant-weapp 步骤见：https://jessieeeeee.xyz/2020/08/12/vantweapp-install/ demo.json 记得在 json 文件中引用 vant-weapp 的 tag 组件： { "usingComponents": { "van-tag": "@vant/weapp/tag/index" } } demo.wxml 在 wxml 文件中搭建页面基础结构： <!--pages/demo/demo.wxml--> &l
小程序：自定义单选多选样式（wepy）
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
10-14 403
<style lang="less"> .item-form { radio-group { display: flex; flex-wrap: wrap; } checkbox { display: none; } .form-checkbox { display: flex; flex-direction: column; width: 156rpx; height: 136rpx; color: #3333
微信小程序——实现单选、多选
weixin_61972561的博客
05-15 2586
微信小程序——实现单选、多选
微信小程序button选中改样式-实现单选/多选
最新发布
06-06
要实现微信小程序中button的选中改样式，可以使用CSS样式来实现。以下是单选和多选的实现方法： 单选： 1. 在wxml文件中，使用radio-group包裹radio组件，设置name属性，表示所属组别，如下所示： ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值