vue 代码控制复选框的选中和取消选中

最新推荐文章于 2024-06-13 15:09:17 发布
最新推荐文章于 2024-06-13 15:09:17 发布
阅读量1w 收藏 2
点赞数 2
分类专栏： 踩坑记 vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41409120/article/details/120013076
版权

关于vue中的复选框，官方文档在这儿
其中它是通过这样的方式来控制选中和取消选中的：
在这里插入图片描述

复制到idea里面：

在这里插入图片描述
可以看到，直接通过将checked设置为true或者false就可以控制选中和取消选中。
但为什么我用就不行呢？
几经调试，最后发现，官方这段例子中没加 a-checkbox-group ，而我的代码中是将 a-checkbox 包在 a-checkbox-group 中的。这种情况下， a-checkbox 中对:checked的绑定控制将失效。
那要怎么做呢？
方法利用 a-checkbox-group 中的v-model。这里将v-model绑定给checkboxGroupValue:

<a-checkbox-group
              v-model=
最低0.47元/天 解锁文章
童 话
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决layui动态加载复选框无法选中的问题
12-13
在自定义的复选框中，我们可以使用CSS控制选中和未选中的状态，并通过Vue.js的`v-on:click`绑定事件处理函数。例如： ```javascript // 单个的选中取消 checkBox: function(n) { var checkbox = $('tbody tr').eq...
a-checkbox-group的用法2
reembarkation的博客
06-24 5207
a-checkbox-group的用法2
选择框的使用
weixin_小白鼠的博客
08-08 1329
选择框的基本使用 checkbox多选框 1. 基本使用 <a-checkbox-group @change="checkChange"> <a-checkbox v-for="(item, index) in list" :key="index" :value="item"> {{ item }} </a-checkbox> </a-checkbox-group> methods: {
Python私教张大鹏 Vue3整合AntDesignVue之Checkbox 多选框
最新发布
Python私教
06-13 777
单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。在实现全选效果时，你可能会用到 indeterminate 属性。在一组可选项中进行多项选择时；第二步：定义选项组组件。第三步：定义选项组内容。第六步：监听已选中列表。第一步：定义全选组件。第四步：定义全选状态。第五步：监听选中事件。
a-checkbox-group组件的使用
reembarkation的博客
06-24 4159
a-checkbox-group组件的使用
Vue + Element + Table 分页选择勾选 和 取消勾选
qq_37916164的博客
01-18 4733
<el-table ref="goodOrder" :data="goodOrder" :row-key="getRowKeys" v-loading="loadingGoodOrder" border @row-click="toggleSelection" @selection-change="handleSelectionChange"> <el-table-column type="selection" :reserve-selection="true" fixed h.
antd 复选框（a-checkbox-group）纵向排列
是秃子总会发光
03-06 2213
antd 复选框（a-checkbox-group）纵向排列
vue+element UI实现树形表格带复选框的示例代码
10-17
在Vue和Element UI框架中，实现树形表格带复选框功能可以极大地增强用户界面的交互性和数据管理能力。以下是一些关键知识点和步骤，详细解释如何构建这样的组件： 1. **数据转换**： 树形表格的数据通常不是直接以...
Js实现复选框的全选、全不选反选功能代码实例
10-15
复选框的选中状态可以通过`checked`属性进行控制，`checked`为`true`表示选中，`false`表示未选中。 接下来，我们来看如何通过JavaScript实现全选、全不选和反选功能。在JavaScript中，我们可以获取到页面上的DOM...
复选框选中表格中的行进行删除行操作
04-29
在IT领域，尤其是在Web开发和用户界面设计中，"复选框选中表格中的行进行删除行操作"是一项常见的功能需求。这个功能主要用于提供用户友好的数据管理方式，让用户能够批量选择并处理表格中的数据。下面我们将详细...
vue中改变选中当前项的显示隐藏或者状态的实现方法
08-28
在Vue.js框架中，改变选中当前项的显示、隐藏或状态主要依赖于Vue的数据绑定和事件处理机制，而非直接操作DOM。Vue的核心思想是声明式渲染，这意味着开发者只需要定义数据，视图会自动根据数据变化进行更新。下面将...
vue实现“全选/全不选/反选”的三个方法
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
02-21 9571
【代码】vue实现“全选/全不选/反选”的三个方法。
vue 实现checkbox选中，在上面显示选中的数据，删除取消选中并删除显示的数据...
梁小茹的博客
12-12 3275
实现勾选选中和删除取消
antd-vue的a-checkbox-group包裹a-checkbox导致无法默认选中问题
Laoqina的博客
10-16 2547
antd-vue的a-checkbox-group包裹a-checkbox导致无法默认选中问题，以及后续重置按钮的设置。
Vue实现动态复选框的全选 全不选 获取选中值
m0_51945510的博客
11-19 4952
Vue实现动态复选框的全选 全不选 获取选中值
antd-vue Checkbox Group 封装实现多选、全选、搜索过滤组件
qq_39532524的博客
11-29 4639
基于antd实现搜索，全选，多选功能，并且支持保存，重置，初始默认选中项。注意事项：我的列表格式是这样的所以需要注意的是checkbox上绑定的value要是code，不然group是找不到对应的值。checkbox-group v-model对应的是选中的arr，格式是[1, 2, 3, 4]这样的，所以保存时候要取交集。
Vue3 - Element Plus 表格组件 “手动“ 取消/选中勾选列，并同步更新表格复选框 UI 状态（el-table 表格组件中，通过代码手动控制某个列的选中与取消勾选，并且复选框跟着变）
王佳斌
11-28 3526
vue3，element plus，element plus手动移除某项勾选，element plus表格列勾选如何手动删除某项，element plus表格el-table组件如何清除和选中指定复选框，如何去掉勾选某几个，怎么手动控制取消表格列的勾选状态，element表格列勾选如何手动控制，表格手动取消选中某一个复选框，手动操作element plus表格复选框的选中与反选功能，如何手动取消复选框的勾选，复选框手动勾选和取消某项，把勾选列表的数据删除后,复选框ui状态不变怎么办，如何点击按钮控制复选框的
vue之复选框选中表格行数据（全选/全不选/部分选）
a_123456_bb的博客
09-21 905
【代码】vue之复选框选中表格行数据（全选/全不选/部分选）
ant-design-vue a-checkbox-group数据选中不显示问题
qq_44130891的博客
09-26 807
ant-design-vue a-checkbox-group数据选中不显示问题
vue中点击复选框时，如果为打开按钮，单选框不能被选中
05-25
可以通过监听复选框的 `change` 事件，在事件处理函数中判断复选框是否被选中，如果是，则将单选框的 `disabled` 属性设置为 `true`，否则设置为 `false`。具体实现如下： ```html <template> <div> <input type="checkbox" v-model="checked" @change="handleChange"> <label>打开按钮</label> <br> <input type="radio" value="1" name="radio" :disabled="radioDisabled"> <label>选项1</label> <br> <input type="radio" value="2" name="radio" :disabled="radioDisabled"> <label>选项2</label> </div> </template> <script> export default { data() { return { checked: false, radioDisabled: false } }, methods: { handleChange() { this.radioDisabled = this.checked; } } } </script> ``` 在上面的代码中，我们使用了 `v-model` 指令绑定了复选框的选中状态，并且在复选框的 `change` 事件中调用了 `handleChange` 方法。在 `handleChange` 方法中，我们根据复选框的选中状态来动态设置单选框的 `disabled` 属性，从而实现了单选框根据复选框的状态来控制是否能够被选中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值