关于uniapp多个checkbox或多个radio,导致选择后下一题滞留上个选择的解决办法

最新推荐文章于 2024-08-28 15:31:04 发布

青鸟@飞鱼

最新推荐文章于 2024-08-28 15:31:04 发布

阅读量1.6k

点赞数 5

分类专栏：前端问题小记文章标签：小程序 web app

本文链接：https://blog.csdn.net/weixin_41013858/article/details/118107641

版权

前端问题小记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在uniapp 中，做一个答题小程序的时候，用到了radio 控件，然后使用radio-group 进行对其的具体使用，在uni提供的方法中，我采取了动态切换选项的方式，但是在选择第一题后，第二题自己保留了上一次的选择，在查找了一些网友的评论后，发现并没有解决这个问题，于是，代码来了！

将整个radio-group作为一个题目，创建所有题目后，根据当前题目所在的位置，选择性的展示，在数据回显时，也未发现起干扰。

如果各位友友有更好的解决方法，随时欢迎

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

青鸟@飞鱼

关注关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

uniapp的checked多项选择回显

qq_35547053的博客

04-01

2000

//第一种：遍历两种数据，找到相对应的元素 let me = this for (var j = 0; j < repeat_items.length; j++) { //后台返回来的选项 for (var i = 0; i < me.list.length; i++) { var pId = repeat_items[j]; var Id = me.list[i].id if (pId == Id) { //找到相对应的元素 me..

uniapp实现在表单中展示多个选项，并且用户可以选择其中的一个或多个选项

最新发布

m0_69665878的博客

09-23

1369

uni-data-checkbox是uni-app的一个组件，用于在表单中展示多个选项，并且用户可以选择其中的一个或多个选项。2、灵活性：uni-data-checkbox可以自定义样式，包括背景色、边框样式、字体颜色等，以适应不同的项目需求。3、数据绑定：uni-data-checkbox可以与数据进行双向绑定，可以根据数据的变化动态更新复选框的选中状态。总之，该组件可以在uni-app的项目中方便地使用，提供了灵活和易于使用的功能，适用于各种表单中的选项选择场景。

4 条评论您还未登录，请先登录后发表或查看评论

关于uniapp多个radio,下一题仍然保留上个题目的选择的解决办法

hunantai的博客

04-14

1001

注：:key绑定的值必须是唯一的，不能是:key="index"！！！！！！！！每个选项index都是从0增长，所以每个题目的选项index都是相同的，不是唯一标识。

uni-app中radio动态生成和数据绑定

Zwllxy010125的博客

08-28

241

【代码】uni-app中radio动态生成和数据绑定。

uniapp radio group 选择之后，数据更新默认继承上次选项问题

qq_54030878的博客

07-27

512

随后在我需要刷新组件的地方，添加上this.reload()，我这里需要在上一题和下一题的时候刷新组件。再接下来就是写一个刷新方法了，标准三件套。可以使用v-if做一个组件刷新功能。然后在data中初始化一下。

uniapp radio如何实现取消选中

黎小小的博客

07-01

3458

uniapp 内置radio组件明确表示，不能取消选中，那如果要实现取消选中呢？只要在外层加上label或者其他标签包裹，然后加入事件控制radio的值改变即可。

uniapp中实现移除radio选中状态

以码会友

01-25

1404

但在实际使用中发现，即使将selected=null，依然无法在页面上取消选中状态，官方也并没有提供相关的钩子。这里需要用到一个setTimeout，timeout时间可以尽量短，避免页面出现闪一下的效果。那么，如何实现一键清除已选中的radio状态呢？可以设置。这种来控制是否选中该项，

uniapp:单选、多选、文本（使用radio等组件，先整理参数再提交）二

weixin_46899191的博客

11-15

1418

双层循环之radio、checkbox、textarea ) 代码片. // An highlighted block <template> <view class="box"> <view class="content">  <view style="margin: 28rpx 0 0 0;" v-if='radioList.length>0'>

关于checkbox选择个数限制

03-17

Checkbox是用户界面中常见的一个组件，允许用户从多个选项中选择一个或多个。默认情况下，用户可以无限制地选择Checkbox，但根据业务需求，我们可能需要限制用户只能选择固定数量的选项。实现这个功能有多种方法，...

uniapp多选标签/多选按钮/多选框源码

12-01

在UI设计中，多选标签（Multiple Select Tags）通常用于让用户在多个选项中选择一个或多个。在`uni-app`中，我们可以利用`<uni-tag>`组件来实现这一功能。`uni-tag`提供了多种样式和交互方式，可以通过设置`type`...

qt 遍历多个checkbox_checkbox的几种遍历方法

weixin_33375360的博客

12-23

1601

html代码如下：1 2 13 24 35 46 57 68 79 810 911 ...

uniapp做微信小程序，自定义checkbox和radio的样式

liuye066的专栏

07-12

3046

用uniapp做个微信小程序，其中有用到自定义checkbox和radio的样式；自定义checkbox。

《uni-app》表单组件-Checkbox组件

热门推荐

Oliver尹的博客

08-31

2万+

本文主要分享了uni-app中内置组件checkbox的一些用法，主要包括属性如value属性，禁用属性，选中属性等，以及checkbox提供的默认事件change的使用，最后示例了一个结合v-for指令，button组件完成了一个动态生成checkbox并获取选中值的示例demo；.........

UNIAPP 复选框数据回显

xiaosi1413的博客

08-25

2089

为true 选中需要做判断当前答案是否包含在答案列表中。uniapp 表单复选框数据回显。

uniapp实现左右滑动切换题目

学习

06-30

2820

触摸事件触摸事件的默认参数 event 中包含了三个用于跟踪触摸的属性对象的数组：touches：当前跟踪的触摸操作的touch对象的数组targetTouches：特定于事件目标的Touch对象的数组changeTouches：自上次触摸以来发生了什么改变的touch对象的数组每个Touch对象包含的属性如下：GitHub：uniapp实现用户左右滑动切换题目功能.........

uniapp的uni-data-checkbox使用注意

bdstu2020的博客

03-02

1474

uni-data-checkbox复选框不显示

uniapp区分多个radio,checkbox,rate组件

yandong634的专栏

08-30

346

uniapp区分多个radio,checkbox,rate组件

uniapp使用checkbox-group实现多选题并实现互斥

一粒程序米

12-08

1671

也就是说，如果先选择了前面六道题，后面又选择了最后一道，前面的题目就会自动置空，反之，如果先选了最后一道题，然后再去选择前六道的任意一道题，最后一道题都会置空。不然用户手误点到正方形外部也会改变checkBox的样式，导致互斥事件的样式没有发生改变。注意一定要阻止冒泡事件，我在.act-view-answer类里加了。全局变量state用来存每道题的选择情况：是否有选择。上图就是实现互斥的一个过程，前6道题和最后一道题互斥。如果不想要互斥事件的多选题，只需要改js。，数组的大小由题目的选择数量决定。

uniapp中checkbox的可选数量控制及选中value获取

学无止尽

06-16

831

使用element-ui时，可以使用checkbox组件的max、min属性直接控制最多、最少可以选中几个复选框。但使用uniapp时，没有max、min属性，应该怎么控制呢？3、监听复选框变更事件，获取该复选框变更事件（取消或选中）以及该复选框的name属性值，以便做业务处理。2、若已选数量为最大允许值，其他复选框变灰，不可再选，但已选复选框可以进行取消勾选；1、监听复选框组的变更事件，获取已选复选框的数量，判断已选数量是否为最大允许值；

多浏览器下限制checkbox选择数量：5选限策略

通常，实现这一功能的一种常见做法是利用JavaScript的事件监听器（如`change`或`click`）来追踪被选中的checkbox的数量，并在数量达到5个时阻止后续的选择。这可能涉及到遍历`document.querySelectorAll('input[type...