uni-app中checkbox-group实现全选功能

功能描述：

点击全选框，选项全被选中，再次点击，选项全不被选中

全选框选中状态下，取消任一选项，全选框不被选中，并且在全选框不被选中的状态下，如果选项全都被选择，全选框会变为选中状态

代码块：

<template><view class="container"><text>请选择你喜欢的漫画</text><!-- 全选 --><checkbox-group name="allCheck" @change="changeAll"><label><checkbox :value="allCheck.value" :checked="allCheck.checked"/><text>{{allCheck.name}}</text></label></checkbox-group><!-- 每项选择 --><checkbox-group name="check" @change="changeCheck" class="check"><!-- 注意v-for不要设在checkbox-group上 --><label v-for="(item, index) in content" :key="item.id"><checkbox :value="item.value" :checked="item.checked"/><text>{{item.name}}</text></label></checkbox-group></view>
</template><script>export default {data () {return{allCheck : {name : '全选',value : 'all',checked : false    },content : [{name : '《某天成为公主》',value : '《某天成为公主》',id : 1,whether : true},{name : '《当神不让》',value : '《当神不让》',id : 2,whether : true},{name : '《海贼王》',value : '《海贼王》',id : 3,whether : true}]}},methods:{// 全选changeAll : function(e) {if(e.detail.value.length == 0) {this.content.map(item => this.$set(item, 'checked', false));this.$set(this.allCheck, 'checked', false);}else{this.content.map(item => this.$set(item, 'checked', true));this.$set(this.allCheck, 'checked', true);}},// 多选changeCheck : function(e) {var items = this.content;var len = this.content.length;var values = e.detail.value;// console.log(values)for(var i = 0; i < len; i++) {var item = items[i];if(values.includes(item.value)){this.$set(item, 'checked', true);}else{this.$set(item, 'checked', false);}}// 判断选中状态var arr = [];this.content.forEach(item => item.whether == true ? arr.push(item) : '');var isAll = arr.every(item => item.checked == true);isAll ? this.$set(this.allCheck, 'checked', true) : this.$set(this.allCheck, 'checked', false)}}}
</script><style>.container {position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);}.check {display: flex;flex-direction: column;}page {background-color: #f1e4ff;}</style>

细节注意：

1.v-for不要写到checkbox-group标签上，而应该写到它的子级label上，不然取到的e.detail.value只是一个单选的值，而不是多选的值
2.this.$set的使用
3.数组的map、every、some等方法
4.举一反三，可以根据自己的需求去判断逻辑然后改写这个代码，都是通用的

uni-app中checkbox-group实现全选功能相关推荐

【javascript】checkbox——类似邮箱全选功能
现在很多邮箱都有全选的功能,我也做了个练练手. <!DOCTYPE HTML> <html lang="en-US"> <head><me ...
ListView加checkBox可以实现全选等功能
1.效果图 2.LIteView_item布局 <?xml version="1.0" encoding="utf-8"?> <Relativ ...
点击编辑框全选内容java_Android 中使用EditText 点击全选再次点击取消全选功能
最近在开发浏览器碰到这么一个需求:点击地址栏的时候,需要全选并调出键盘,再次点击就取消全选显示光标.点击屏幕除地址栏其他位置时,键盘隐藏,隐藏光标. 大部分浏览器都是这样的逻辑,这样可以提高用户体验, ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
layui 实现表单、表格中复选框checkbox的全选功能
一.layui 实现表单中多选框的全选功能,代码如下: //html页面表单 <form class="layui-form"><div class=" ...
java记事本复制粘贴_Java Swing 如何实现记事本中“编辑”菜单下的剪切，复制，粘贴，删除，全选功能...
这篇文字将要学习以下知识点: 1.如何给JButton按钮添加鼠标点击事件监听器 #1.addMouseListener(MouseListener l) 给JButton添加一个鼠标点击监听器l ...
DevExpress中实现单选、多选、全选功能
一.实现效果 GirdControl表格实现单选.多选.全选功能工程下载实现对GridControl中的数据行单选.多选.全选功能,且能够获取到所有选择行的数据信息. 二.核心实现 2.1.在表格第 ...
android 全选功能,Android实现ListView控件的多选和全选功能实例
本文实例讲述了Android实现ListView控件的多选和全选功能.分享给大家供大家参考,具体如下: 主程序代码 MainActivity.Java package yy.test; import ...
vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

uni-app中checkbox-group实现全选功能

uni-app中checkbox-group实现全选功能

功能描述：

代码块：

细节注意：

uni-app中checkbox-group实现全选功能相关推荐

最新文章

热门文章