Axure高级交互设计：复选框全选反选取消

已于 2025-05-22 07:59:53 修改
阅读量1.2k 收藏 10
点赞数 16
分类专栏： Axure应用交互设计 文章标签： axure 交互
于 2024-10-17 10:50:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/benleiqiang/article/details/142996151
版权

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！

 Axure产品经理精品视频课已登录优快云可点击学习https://edu.youkuaiyun.com/course/detail/40420

课程主题：复选框全选反选取消制作

主要内容：点击复选框，实现列表数据项全选选中、反选和取消选中效果

应用场景：多项选定、一键全选、一键取消、一键反选

案例展示：

案例视频

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Axure高级交互设计：树形菜单展开与折叠
benleiqiang的博客
10-18 1491
步骤五：添加一级类目下蔬菜的交互；单击蔬菜按钮——显示二级类目——设置选中效果；步骤二：依次录入一级类目、二级类目、三级类目、商品名单，组成整体信息内容。步骤七：依次为叶菜、瓜菜二级、三级、商品名称添加如上按钮的交互和更多选项。步骤三，除了一级类目，全部设置成载入时隐藏。如有其他相关问题，欢迎私信沟通，关注。
Axure应用交互设计：横向菜单左右拖动高级交互
benleiqiang的博客
10-17 958
步骤二：向动态面板中拖入一个矩形，作为菜单的外框，拖入一个按钮，命名为全部，并设置选中效果。如有其他相关问题，欢迎私信沟通，关注。步骤一：拖入页面一个动态面板作为显示区。步骤五：组合所有按钮，并转换为动态面板。步骤四：为每个按钮添加单击选中的值。步骤六：设置拖动时，左右移动的阈值。步骤三：复制出所有按钮，分别命名。横向菜单及选中组合效果。
js 中 实现复选框全选 子复选框案例_Axure RP实例教程：全选与取消全选效果
weixin_39879522的博客
11-28 334
Axure RP 9 Mac这款原型设计软件能让设计者快速创建应用软件，或者在web网站的线框图、流程图、原型和规格的设计制作，从低到高的视觉和交互保真度的全方位构建，是目前业界首屈一指的交互式产品原型设计软件！此次小编就带大家来看看Axure RP如何做全选与取消全选效果。1、案例效果：初始状态/取消全选时：全选后取消任一选项时：全选/单选全部选中时：2、案例描述：列表中相邻的行具有交替的背...
Axure RP 复选框全选、反选
11-26
用Axure RP 8.0做的原型设计列子，作用是复选框做全选和非全选，已选的做反选。可以学习下反选或非反选的交互思路。
Axure复选框组件的深度定制：实现自定义大小、颜色与全选功能
最新发布
招风的黑耳优快云
04-24 951
默认情况下，Axure中的复选框组件具有固定的大小。然而，通过一些技巧，我们可以轻松实现复选框大小的自定义。使用矩形替代：在Axure中，可以通过绘制矩形并添加交互状态来模拟复选框。首先，绘制一个矩形作为复选框的背景，然后通过“选中时”和“未选中时”的交互状态，为矩形添加不同的样式（如边框、填充色），从而在“选中”状态下实现复选框的“打勾”效果。调整尺寸：直接在Axure的“样式”面板中调整矩形的大小，即可间接实现复选框大小的自定义。复选框的颜色不仅影响视觉效果，也是品牌一致性的重要体现。基础颜色设置。
Axure教程—复选框全选与反选
weixin_43516258的博客
06-25 4398
很多业务系统之中都会有以列表的形式展现数据的情况，那么问题来了，对列表选择时会出现多选、全选、反选的问题，今天就来介绍如何使用axure原型工具实现复选框的多选、全选和反选。
axure中继器之全选、取消全选
2301_76343523的博客
01-03 670
先拖入一个动态面板，然后右击选择滚动条，若有很多数据，页面放不下时表格可以滚动，双击进入动态面板放入中继器，再填写数据，设置交互使数据能与中继器关联，展现在页面中.1.当全选未选中时，单击全选状态为选中，单项状态也选中，设置计数器为4（数据列表只有四条数据）标记全部行。2.当全选选中时，单击全选状态为未选中，单项状态也未选中，设置计数器为0，取消标记全部行。1.当单项未选中时，单击单项状态为选中，设置计数器加一，触发计数器事件，标记当前行。1.首先要创建一个中继器表格。
axure实现复选框全选_Axure 实例 － 复选框的全选 & 取消（转）
weixin_29041443的博客
12-29 2312
复选框的［全选］与［取消］是比较常见的一种交互事件，常用于对于某列表的批量编辑，形式一般来说有两种，早前常见的是通过［全选］和［取消］两个Button 来完成对于 CheckBox 的控制，现在更多见的是只通过对一个 CheckBox的开关式操作来完成，这次实例带来的就是对于后者在 Axure 中的实现方法。要求：1、将一个 CheckBox控件做为控制开关，即该项选中则实现对于其它复选框的［全选...
Axure学习日志之如何自制单选按钮复选框
前端啤酒屋
06-06 968
打打打开Axure，为什么每次都要说这句话呢？ 鸭鸭想说 首先看一下Axure8给我们的单选按钮和复选框 怎么样，漂亮？ 漂亮不敢说，可以说经典，但是某些情况下我们需要些更美丽的。 比如带一点圆角，不同颜色 所以就要自制了 自制也很简单 单选按钮自制： 我们搞的大一点，两个圆形元件，一个60一个40 将内部⚪进行隐藏边框 设置内部⚪的选中状态 再同时设置nei，wai两个⚪的鼠标单击时 切...
Axure高级交互设计：中继器实现时间读取和修改
benleiqiang的博客
10-16 1387
经过多次尝试从外向内读取失败后，换了拿数据的方法，我们不从中继器外向内读取数据，可以在中继器修改按钮交互触发时，向外多输出一份数据，这样，我们实际上拿到了两份标记行的数据，一份作为修改使用，另一份作为备份，当我们需要时再次使用！实现路径：单击时——隐藏修改页面——更新行——目标中继器——已标记——对应列值。步骤一：设计“修改页面”作为我们修改中继器数据的录入窗口，注意文本框的时间格式，载入时隐藏（需要时由修改按钮调出）步骤二：添加修改交互，点击修改——显示修改页面——标记当前行——传出文本给文本框。
Axure设计之下拉复选框（中继器）
招风的黑耳优快云
07-03 6443
在系统表单设计中经常用到下拉复选框，下拉复选列表用于展示可选标签，并允许用户选择多个标签，那么该如何利用Axure RP9制作一个下拉复选框呢？本文总结了设计过程的所需元件和整体思路，通过对关键步骤的讲解，希望对你有所帮助。
下拉复选框
10-29
jquery 下拉复选框控件,支持多选，全选，返回默认值
axure9 制作下拉复选框效果
m0_67814701的博客
08-07 1143
进入下拉中继器内部，选择第一行，单击时在选项中继器增加行。2.进入中继器拖入一个表格，根据需要选择保留行数和列数。4.进入选择中继器，选择圆形添加交互，鼠标点击时删除行。1.拖入一个矩形框和一个按钮框，并命名select。进入编辑值页面，添加局部变量，完成后再插入局部变量。1.拖入一个中继器到选项框，把多余的行都删除。3.退出设置中继器显示，在样式中选择水平排布。1.拖入一个中继器，删除多余行，保留一行。2.点击进行中继器拖入一个矩形和圆形。至此完成选项的复选增加和删除功能。选择添加行，点击fx。
Axure RP实例教程：全选与取消全选效果
bojing5611的专栏
08-16 2149
Axure RP 9 Mac这款原型设计软件能让设计者快速创建应用软件，或者在web网站的线框图、流程图、原型和规格的设计制作，从低到高的视觉和交互保真度的全方位构建，是目前业界首屈一指的交互式产品原型设计软件！此次小编就带大家来看看Axure RP如何做全选与取消全选效果。1、案例效果：初始状态/取消全选时：全选后取消任一选项时：全选/单选全部选中时：2、案例描述：列表中相...
将datatable指定单元格设置为空_表格设置"一键全选"按钮，打"√"方式，只需要三步搞定...
weixin_39969060的博客
12-06 374
表格中我们经常会看到许多"√"的设置，通过"√"可以将我们需要的数据进行选中。勾选操作有一种特殊的方式，那就是一键全选。今天我们就来学习，如何利用"√"进行一键全选设置。如图所示，我们通过最上方的按钮，勾选或者取消勾选后，可以实现对下方各类目选项的全选操作。下面我们就来学习一下具体的操作步骤。第一步：依次在个产品类目之前的单元格中，点击菜单栏：开发工具—插入，选中复选框进行插入。然后将名称给删除掉...
axure实现复选框全选_AxureRP教程
weixin_39715513的博客
12-19 1320
AxureRP提供了一系列常用的组件，其中也包括了单选框和复选框，应该来说这两个组件是经常会用到的，涉及选择项的时候，就会想是要做单选控制还是多选控制。常见的用法不做过多解释，这里介绍一下AxureRP里是如何来设置实现一些单选框和复选框的较为复杂的交互效果的。AxureRP提供的单选框默认是以个体为单位，也即在摆放多个单选框的时候，每个选项都是可以被选中的，这其实也就失去了单选的实际意思，不过在...
Axure实现单选、全选与取消全选的方式
热门推荐
z983002710的博客
02-27 3万+
第一步：创建一个多选项的页面，如下所示：第二步：实现单选效果，选中需要设置单选效果的原件添加用例：第三步：设置原件的选中状态当前原件，其值设置为“toggle":第四步：设置原件点击后发生的样式变化，在“选中”中对原件的样式进行设置：第五步：原件单选效果已经设置完毕，如下图：第五步：对每一个参与多选的原件都进行单选样式的设置，包括全选原件，如下图所示：第六步：对全选原件选中状态样式的改变进行用例增...
Axure教程：选择取消选择组交互技巧
AxureBoutique的博客
06-03 726
今天，我们要学习一个Axure技巧。例如，当您单击上面的按钮时，它可以选择或取消选择下面的所有项目，然后您可以显示它们的操作。这里的操作是Delete，默认情况下是隐藏的。作者：产品经理之窗 | Axurepm.com。
学习笔记：axure 高级教程 2 复选框（添加判断条件）
莫老王的专栏
06-20 2794
拖动复选框到页面编辑区域，并分别给他们命名全选、1、2、3 ，如图：       设置交互条件      在设置1、2、3的值   同理在设置 全选为假的情况，操作步骤都是一样的，在多设置一遍就行了   最后的设置效果
axure 复选框全选
01-05
在Axure中，可以通过添加一个复选框控件来实现全选功能。首先，在Axure中创建一个复选框控件，命名为“全选”。然后，在交互动作中，选择“全选”复选框控件，添加“点击”事件，并选择“选中所有子控件”这个动作。接着，选择要实现全选功能的所有子控件，例如复选框、复选框组等，将它们作为“子控件”添加到“全选”复选框的“选中所有子控件”动作中。这样，当用户点击“全选”复选框时，所有设置为子控件的复选框都会被选中。 另外，需要注意的是，为了方便用户理解，可以在设计中添加文字说明，如“全选”复选框旁边加上“全选”文字。这样用户在使用时就能清晰地知道这个复选框的作用。 总的来说，通过Axure中的交互动作和子控件的设置，可以很方便地实现复选框的全选功能，为用户提供更便捷的操作体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

结构化知识课堂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值