Vue实现动态复选框的全选全不选获取选中值

在开发中，动态复选框的功能还是比较常见的，下面是对此做简要的讲解

1、复选框的实现原理

动态复选框主要是通过v-model来控制的，为true时选中，为false时取消选中。

2、功能展示

选中“进行中”和“已完成”，然后点击“确定”按钮

按F12，打开浏览器的控制台，可以看到输出了所选中选项的数组集合。

3、完整的实现代码

全选：遍历数组里的每一项, 让其checked属性取true。

全不选：遍历数组里的每一项, 让其checked属性取false。

<template><div><div><div v-for="item in checkboxData" :key="item.dictid" style="font-size: 18px"><el-checkbox v-model="item.checked" :label="item.dictvalue" :id="item.dictid" :value="item.dictvalue"></el-checkbox></div></div><div style="margin-top: 10px"><el-button @click="checkall" size="small">全选</el-button><el-button @click="checkno" size="small">全不选</el-button><el-button type="primary" @click="checkok" size="small">确定</el-button></div></div>
</template><script>
export default {name: 'test',data: function(){return {checkboxData: []}},methods:{checkall(){// 全选this.checkboxData.forEach(item => {item.checked = true;})},checkno(){// 全不选this.checkboxData.forEach(item => {item.checked = false;})},checkok(){// 确定console.log(this.checkboxData.filter(item => item.checked))}},created(){// 假装从后端获取过来的数据var data = [{ dictid: 0, dictvalue: '进行中' },{ dictid: 1, dictvalue: '已完成' },{ dictid: 2, dictvalue: '已结算' },{ dictid: 3, dictvalue: '已取消' },{ dictid: 4, dictvalue: '未完成' },]// 原数据中没有checked字段，所以给每条数据添加checked以便后续操作for(var i=0; i<data.length; i++){data[i].checked = false}// 将处理后的数据返回到页面中this.checkboxData = data}
}
</script><style scoped></style>

Vue实现动态复选框的全选全不选获取选中值相关推荐

js、jquery操作复选框checkbox总结（单个/多个获取选中值、初始化设置默认选中值、全选反选）
一.单个复选框使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法: https://blog.csdn.net/qq_40015157/article ...
Material UI 带复选框表格获取选中值（索引）
vue+Material UI 带复选框表格获取选中值(索引) 发现问题解决写在最后发现问题神坑UI框架–Material,这款框架我不晓得为什么会这么坑,有这么多的问题为什么会被推出来,真的 ...
复选框（checkbox）、多选框
1.需求分析可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分图示是一个列表加底部一段文字说明,列 ...
html5判断多选框是否选择的函数,复选框（checkbox）、多选框
1.需求分析可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分图示是一个列表加底部一段文字说明,列 ...
多选框向后台传值，多选框的回显，对多选框的各种操作
1.多选框的回显: js:$( function(){ var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为 ...
下拉列表与多选框以及GridView中的多选框的问题
小丫头的随笔... 页面设计中有一个下拉列表(DropDownList)和多选框列表(CheckBoxList)以及一个可以提供显示的表格(GridView).当选择下拉列表中具体的值时,进行对多选框 ...
Jq 复选框全选，全不选，监听复选框，获取选中值
function checkAll() {//全选全不选let xieyi=$("#dataTypeAll");if(!xieyi.is(':checked')){$(" ...
vue+element 动态加载数据，checkbox实现全选，不全选
效果图: 功能描述: 图中所展示数据,全是从服务器获取的数据动态加载,实现点击全选,不全选,加粗字体为父节点,后面为子节点. 数据结构: [{"children": [{" ...
复选框 html 操作,HTML页面中复选框的操作方法
原标题:HTML页面中复选框的操作方法复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会见到复选的身影.接下来,是我之前写过的两个小demo,都是关于复选框的,希望会给大家带 ...

Vue实现动态复选框的全选全不选获取选中值

1、复选框的实现原理

2、功能展示

3、完整的实现代码

Vue实现动态复选框的全选全不选获取选中值相关推荐

最新文章

热门文章

Vue实现动态复选框的全选 全不选 获取选中值

1、复选框的实现原理

2、 功能展示

3、完整的实现代码

Vue实现动态复选框的全选 全不选 获取选中值相关推荐

最新文章

热门文章

Vue实现动态复选框的全选全不选获取选中值

2、功能展示

Vue实现动态复选框的全选全不选获取选中值相关推荐