微信小程序-关于checkbox遇到的那些坑+解决方案

最新推荐文章于 2024-10-24 20:25:47 发布
最新推荐文章于 2024-10-24 20:25:47 发布
阅读量5.8k 收藏 5
点赞数 2
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38188047/article/details/103015593
版权
本文探讨了接手二手代码时遇到的问题，特别是在处理Checkbox选中状态时的不当做法。作者建议不要将判断逻辑写入checked属性，而应使用一个如ischecked的变量来存储状态，并在页面加载时初始化该值，确保逻辑清晰且易于维护。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

难受，接手的二手代码，差点呕吐。写个demo
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

也就是说 这个选中是有值的，不选中是undefined，你想要得知用户是否选或者没选，不要将判断或者你的中间值写在checked里面，你也可以试一下，试一下更健康。

正确写法

(这里加这个ischecked，假设进入第一次是false或者可能是true，你将它存储到数据库，或者内存中，重新进入到页面，一开始设置这个ischecked,这样就可以控制它的默认值)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

【微信小程序】10分钟学会微信小程序form表单组件，你也能轻松上手
java专栏
11-26 821
通过以上详细的介绍，相信你已经对微信小程序中的form表单组件有了全面的了解。form组件不仅可以帮助你收集用户输入的信息，还能通过自定义样式和事件绑定，让我们的小程序更加灵活和有趣。希望你能轻松掌握这些技能，成为微信小程序开发的高手！🌟🚀下次见，祝你开发愉快！👋🎉。
小程序wxml的坑，checkBox多选回显及最多只能选择两项的问题
m0_68938059的博客
05-31 1544
项目场景：checkbox下想要使用includes来判断下标数组中是否包含当前的value， 问题描述：在使用checkbox时，本意想着每次选中都向一个数组中添加当前的value,然后通过includes来判断是否包含当前value来进行回显，结果发现不会回显，输出得知使用includes拿到的是undefined <view class="weui-cell__hd"> <checkbox value="{{item.value}}" checked="{{values.
微信小程序开发中关于checkbox选中状态因为空格导致的坑
qq_37172200的博客
03-16 583
微信小程序中使用复选框时候不要多输入空格，负责会输出异常 举例子： 正常使用时，ischecked = “false” , 复选框则是正常的未被选中状态； 但是，当我们多出空格时，会输出相反的状态： 此时，ischecked 值没有改，我们看加多余空格的表现： 仔细看代码, checked=" {{ ischecked }}" 在 " 后面多了空格。 <checkbox-grou...
微信小程序多选复选框checkbox。微信小程序官方文档bug
weixin_43818835的博客
07-26 1247
由于个人从事微信小程序开发相关工作，在查询相关文档时（微信官方文档-小程序-表单组件-checkbox），发现示例代码中的一处错误。 问题出现原因：根据文档示例代码提示，设置本人本地代码，却发现下图红框代码无论是“true”or“false”，页面展现效果都是一样的（都会选中“中国”一项），误导本人纠结片刻，冷静思考后，恍然大悟，下图红框处不应该是字符串类型（也就是不应该使用单引号），直接填写b...
微信小程序学习笔记——常见组件【checkbox】
qq_37899792的博客
04-17 2003
checkbox 多选项目。 属性 类型 默认值 必填 说明 value string 否 checkbox标识，选中时触发checkbox-group的 change 事件，并携带checkbox的 value disabled boolean false 否 是否禁用 ...
微信小程序屏幕适配小屏幕和ipad大屏全攻略
Grance的技术之路
03-19 9649
i我们在开发小程序的时候时常会遇到界面适配的问题，如果统一使用rpx布局会造成在ipad等大屏幕上字体过大，导致视觉效果不佳等问题，如果统一使用px又会使iphone5等小屏幕上字体和距离过大，布局无法适配等问题。那么我们怎么找到更优的解决方案呢？
小程序多选自定义组件（附带缓存）
Caicanyu96的博客
12-13 1067
小程序多选自定义组件（附带缓存）组件js代码组件json组件wxml 组件js代码 // component/product/product.js var res = require('../../utils/util.js'); // var car = require('utils/cart.js'); var app = getApp(); Component({ /** * 组...
uniapp做微信小程序，自定义checkbox和radio的样式
liuye066的专栏
07-12 3206
用uniapp做个微信小程序，其中有用到自定义checkbox和radio的样式；自定义checkbox。
为微信小程序换皮肤之配置vant
最新发布
河西~石头
10-24 1558
微信小程序自带的控件虽然具有很好的通用性和简洁性，但在面对一些复杂的交互场景和个性化的设计需求时，可能会显得力不从心。其功能的相对基础使得开发者在实现诸如多步骤复杂表单提交、实时数据交互与可视化展示、高度定制化的界面布局等方面，需要投入更多的时间和精力去进行额外的开发和调试工作。而且在视觉效果的丰富度上，相较于一些专业的 UI 组件库，可能无法满足用户对于现代应用日益增长的审美和体验要求。
原生微信小程序开发-黑马优购（一）
peng109的博客
03-14 3233
接口文档地址： 轮播图--ShowDoc 视频地址： 黑马程序员微信小程序开发前端教程_零基础玩转微信小程序_哔哩哔哩_bilibili vs快捷键 wx-app wx-page 通过样式方式引入字体图标 微信小程序中不支持通配符“ * ” 页面初始化 主体颜色定义成变量 微信小程序单行注释没有用 单行注释没有用（//） 要 用多行注释（/* */） 写less文件，变成wxss文件？ 发送请求 ，要么记得把勾去掉，要么去开启请求合法域名 引入的路径要写...
CheckBox复选框实现点击文字选中效果
每天学习一点点
10-14 3528
想实现点击‘物流‘即可选中第一个复选框的效果，想到的方法是在input和物流 外面加上一个label标签 这样修改后可以实现点击文字选中复选框的效果，但是最终想要的效果是点击tr就可以把复选框选中，也就是点击‘物流’所在行就选中复选框。 实现方式就是让label标签占满整个tr，设置label的宽高为100% 问题到此为止成功解决。 ...
vue antd项目实战——checkbox多选框限制选择个数（disable属性与includes方法）
XSL_HR的博客
03-27 4618
vue antd项目实战——checkbox多选框限制选择个数（利用ant design vue中的disabled属性和JavaScript原生的includes方法判断数组中是否含有某个元素）
关于微信小程序中获取单个checkbox是否被选中状态的值
热门推荐
Candy_mi的博客
04-27 4万+
1.单个CheckBox的使用 一般用于做类似于记住密码功能的单个复选框需要获取是否选中时 wxml部分 //wxml <checkbox-groupbindchange="niming"> <view class='check-box'> <checkboxvalue="是否匿名"/>是否匿名 </view> &...
在微信小程序中，如何在选中一个checkbox是，判断条件，当为true时选中成功，当为false时则未选中？
写写代码
04-20 2878
以上就是可以用来在微信小程序中在选中一个checkbox时，判断条件，当为true时选中成功，当为false时则未选中。事件中，获取选中的值，然后判断条件，最终根据条件设置对应的。就是你需要判断的条件。当条件为true时，设置对应的。当条件为false时，设置。在微信小程序中，可以使用。来实现选择时的条件判断。事件中，根据条件设置。
微信小程序radio点选框，再次点击取消
weixin_39090097的博客
01-02 3751
&lt;view class="page"&gt; &lt;view class="page__hd"&gt; &lt;text class="page__title"&gt;radio&lt;/text&gt; &lt;text class="page__desc"&gt;单选框&lt;/text&
微信小程序Form表单提交按钮获取不到表单数据
m0_56799641的博客
08-06 1627
问题描述：再写微信小程序的一个案例时，bindsubmit绑定事件后，事件对象e.detail.value中的值是个空对象！原因：input的输入框缺少name属性。
uniapp switch开关切换页面checked丢失
wy_319的博客
09-01 842
1、template代码示例： 2、js代码示例： a、当点击change事件的时候，将checked存至缓存 b、onshow（）里每次进入页面的时候 从缓存中获取checked的状态并赋值给data里的变量接收，这样checked切换页面也会保存下来了 案例： ...
微信小程序动态改变checkbox的选中状态
liyucheng777的博客
04-25 2580
先看实现的效果 动态改变checkedbox 上代码 wxml: <checkbox-group class="checkrideo" bindchange="checkboxChange"> //wx:for循环渲染数组中各个对象的value字段的值， <label wx:for="{{vascular_risk_factors}}" wx:key="{{item.id}}"> <view> //checked属性控制item.valu
小程序中的radio----单项选择时的小坑
julystroy的博客
04-26 3616
首先看下官方文档 <radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{items}}"> <radio value="{{item.name}}" checked="{{item.checked}}" /> {{it...
微信小程序结合SSM框架的居住证申报系统解决方案
资源摘要信息:"Java毕业设计]微信小程序-居住证申报系统+ssm+论文(附程序源码).rar" ### 知识点一：微信小程序开发 微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值