vuejs实现checkbox全选和全不选

Vue 实现全选、多选、单选效果 假如这里有多个卡片,点击相应卡片之后需要提交卡片内信息,我们需要把点击的卡片筛选出来,在不使用组件库的前提下实现全选,多选,单选操作(其中全选和多选为一个需求,单选为一个需求) 阅读详情

最近一直在用vue,有个功能是要实现全选和取消全选的功能,于是想了一下要怎么做。

效果如下:

这里写图片描述

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue实现checkbox全选和全不选</title>
    <script type="text/javascript" src="../lib/vue.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-1.11.3.min.js"></script>
    <style>
        
        #table {
            width:600px;
            height:200px;
            margin:100px auto;
        }
        #table label{
            padding:10px;
            font-size:16px;
            border:1px solid #ccc;
        }
        #table label input{
            height:20px;
            width:20px;
        }
        #table .active{
            color:red;
        }
    </style>
</head>

<body>
    <div id="table">
        <p>
            <label :class="check.length == ball.length ? 'active' : ''"><input type="checkbox" v-model="all.flag" @click.stop="allchoosed()">{{all.label}}</label>
        </p>
        <p>
            <label v-for="(item, index) in ball"><input type="checkbox"  v-model="check" :value="item.id" @click.stop="checkChoose()">{{item.label}}</label> 
        </p>
        <h1>提交的id数组:{{check}}</h1>
    </div>
</body>

</html>
<script>
    var v = new Vue({
        el: "#table",
        data: {
            check: [],
            ball: [{
                id: 1,
                label: '篮球',
                flag: false
            },{
                id: 2,
                label: '足球',
                flag: true
            },{
                id: 3,
                label: '乒乓球',
                flag: false
            },{
                id: 4,
                label: '桌球',
                flag: true
            }],
            all:{
                flag: false,
                label: '全选'
            }
        },
        methods: {

            checkChoose: function() {
                var _this = this;
                _this.all.flag = (_this.check.length == _this.ball.length) ? true : false;
                _this.all.label = (_this.check.length == _this.ball.length) ? '取消全选' : '全选';
            },
            allchoosed: function(){
                var _this = this;
                if(_this.all.flag){
                    _this.check = [];
                    _this.ball.forEach(function(item, index){
                        _this.check.push(item.id);
                    });
                    _this.all.flage = true;
                    _this.all.label = '取消全选';
                }else{
                    _this.ball.forEach(function(item, index){
                        _this.check = [];
                    });
                    _this.all.flage = false;
                    _this.all.label = '全选';
                }
            }
        },
        created: function(){
            var _this = this;
            var flag = true;
            //载入时判断是否为全选状态
            _this.ball.forEach(function(item, indx){
                if(item.flag){
                    _this.check.push(item.id);
                }
            });
            _this.all.flag = (_this.check.length == _this.ball.length) ? true : false;
            _this.all.label = (_this.check.length == _this.ball.length) ? '取消全选' : '全选';
            
        }
    });
</script>
vue 实现搜索的结果页面支持全选与取消全选功能 主要介绍了vue 实现搜索的结果页面支持全选与取消全选功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 立即下载

相关推荐

集成电路设计学习笔记(二)基于IC617反相器设计之原理图绘制

博主的博客网站 欢迎大家访问! ccbirds.cn ccbirds.github.io 本文主要记录在IC617中原理图的绘制和schematic的使用方法。 新建library 要画设计自己的集成电路,需要建一个自己的库,方便对自己设计文件的管理。 打开library manager,file 下NEW下Library 选择库的保存路径,一般默认即可,并在name中填入自己库的名字。...

ccbirds 7377

vue实现“全选/全不选/反选”的三个方法

【代码】vue实现“全选/全不选/反选”的三个方法。

我管它叫“知勤者笔记”,主要用来记录和分享我的日常生活与学习经历 1万+

PnP 单目相机位姿估计(二):solvePnP利用二维码求解相机世界坐标

前言 原理简介 输入参数准备 1 objectPoints特征点世界坐标 2 imagePoints特征点在摄像头下的像素点坐标 3cameraMatrixdistCoeffs内参矩阵和畸变矩阵 相机世界坐标的求解 1求世界坐标中的点在相机坐标系下的坐标 2求相机在世界坐标中的坐标 3效果求解相机在世界坐标系下的坐标点 4求解代码1.前言  很多时候,当我们利用单目相机获取图像时,往往只能获取图像中

cocoaqin的博客 5万+

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

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

m0_51945510的博客 5596

Altium Designer许可证冲突?手把手教你用Windows防火墙彻底禁止AD联网(附详细截图)

本文详细介绍了如何通过Windows防火墙精准管控Altium Designer的网络权限,解决许可证冲突问题。通过配置入站和出站规则,彻底阻断AD的联网行为,提升软件运行效率。适用于需要稳定使用Altium Designer的工程师,附有详细截图和高级验证方法。

weixin_38170137的博客 424

公文流转系统

公文录入区 | QLineEdit(文号/标题)、QComboBox(公文类型/紧急程度)、QTextEdit(正文)、QListWidget(附件列表)、QPushButton(上传附件/保存草稿/提交审批) |// 按时间范围获取。QStringList userNames = {"张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十", "郑十一", "王十二"};

寒寒豆豆软件公司的博客 551

Vue 实现复选框全选,反选,单选,多选(简易版)

Vue 实现复选框全选,反选,单选,多选(简易版)

weixin_44021888的博客 2278

12、多旋翼飞行器动力学建模与实验分析

本文探讨了多旋翼飞行器的动力学建模过程,包括使用四元数的优势、刚体运动学与动力学模型的构建,以及螺旋桨推力和扭矩对飞行性能的影响。文章还通过基础实验和分析实验研究了质量、转动惯量和螺旋桨参数对飞行状态和控制响应的影响,并结合理论分析与仿真结果总结了多旋翼飞行器的动力学特性。最后,对未来研究方向进行了展望,以提升多旋翼飞行器的性能和可靠性。

Python的专栏 208

vue+element-checkbox的全选和全不选的操作实现

需求分析 在做一个业务的时候,有一个需求是多个条件进行筛选,全部是checkbox的筛选条件,可以进行任意一个的选择还可以进行全选和全不选,这样进行表格的筛选 实现过程 原本准备直接使用组件里面自带的方法实现的,但是写的时候发现满足不了,后来分析了一下,数据的格式就知道大概怎么实现了 效果预览 源码 /** * @check_All_Change 全选操作 */...

红岸基地 6313

第4章-上下文管理-对话历史记忆系统与窗口优化-《Agentic AI 智能体应用开发》

当上下文窗口接近极限时,需要对已有内容进行压缩。压缩不是简单的截断——你需要保留核心语义,去除冗余。# Python: 对话摘要压缩# 使用 Haiku 做摘要任务,成本最低"""将一段对话历史压缩为摘要"""system="你是一个对话摘要专家。请生成简洁但有信息量的摘要。",f"'用户'

AI天才研究院 251

Open3D(C++) 统计滤波【2025最新版】

 统计滤波器用于去除明显离群点,离群点往往由测量噪声引入,其特征是在空间中分布稀疏,可以理解为:每个点都表达一定信息量,某个区域点越密集则可能信息量越大。噪声信息属于无用信息,信息量较小。所以离群点表达的信息可以忽略不计。...

点云侠的博客 1121

vue+element实现checkbox全选,全不选功能

vue+element实现checkbox全选,全不选功能 我看了官方提供的案例,主要通过indeterminate属性来实现全选的效果。但是不太符合我们公司的需求,我就在官方基础上做了一点修改,从而实现全选和全不选的效果。 我没有用indeterminate属性,主要是通过v-model绑定的布尔值去实现功能 上代码: <template> <el-checkbox v-m...

douyiqing的博客 3609

【stata基础代码大全 】 可独立完成一篇实证

用stata打开,直接替换自己需要的变量就行,小白友好❗️❗️❗️。八、八.中介效应检验:路径分析(三种方法)第二种方法即Sobel-Goodman检验。*(7)Winsor处理,剔除异常值。六、内生性问题解决方法(附具体模型)其三,工具变量:两阶段最小二乘。第三种方法即Bootstrap检验。二、Stata中数据的基本处理。*(5)生成行业、年度虚拟变量。PSM1————近邻匹配。七、调节效应检验:机制分析。*(2)剔除数据中的样本。*(4)给变量添加标签。*(3)生成新的变量。*(6)基本数据匹配。

J_Giser的博客 8027

checkbox全选 element_vue.js实现的全选与全不选功能示例【基于elementui】

本文实例讲述了vue.js实现的全选与全不选功能。分享给大家供大家参考,具体如下:elementui是有checkbox组件,不过问题在于checkbox组件内只能嵌套简单的字符串,如果要嵌入标签怎么办?首先渲染页面:全选订单号:{{item.orderNumber}}商户单号:{{item.shopNumber}}查看详情-备注-加星 {{item.name}}{{item.size}}商...

weixin_39672979的博客 260

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

使用Ant Design of Vue中的Checkbox 多选框实现多组全选和全不选

使用Ant Design of Vue中的Checkbox 多选框实现多组全选和全不选

xuehu999727的博客 819

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

vue结合checkbox 实现全选与全不选

template: <ul class="bankList"> <li v-for="(item, index) in list" :key="index"> <div>{{ item.id }}</div> <div> <p class="bankName">{{ item.name }}</p> <p>曾办

weixin_43045869的博客 893

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

Vue中的checkbox全选全不选的实现

文章转载 https://blog.youkuaiyun.com/bs__q/article/details/79711637 全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuery到vue的转变主要是一个思想想的转变,是将原有的直接操作dom的思想转变到操作数据,用数据驱动dom,也是vue框架的一个核心思想,思想转变过...

mm_hello11的博客 5632

Vue checkBox 全选 全不选 反选 单选 完整实现

<div v-for="(item, index) in pageData"> <input type="checkbox" :value=item.code v-model="checkBoxList"/> </div> <div> 所选择的数组为:{{checkBoxList}} <button @click="checkBoxNotAll">全不选</button&g

科技向善 1012

vue中input多选_vue的多层input checkbox全选,全不选

提要:项目中之前都是一层checkbox选择,书写比较简单。这次项目中遇到了多层。虽说逻辑不复杂,但是书写中也遇到问题,并且对watch有新的理解。本文不啰嗦css和布局内容。主要描述双向绑定和数据的获取。第一步:看静态页面最终效果图和HTML结构布局。图一说明:点击灰色背景区域的父级地址名称,紧邻的下方白色背景的子集订单被选中。点击全选按钮所有checkbox都选中。图2.3说明:图2是双层v-...

weixin_39872395的博客 1292

vue中一维数组的全选、全不选、反选(图文示例)

根据vue项目的需求,需要做一维数组的全选、全不选、反选功能。 怎么制作呢? 主要是判断循环选中的状态,做数据的更改设置即可。 下面是一个示例,具体参考源代码。

大剑师兰特的GIS世界 2036

vue中el-checkbox的全选全不选

** vue中el-checkbox的全选全不选 ** html 成立时间 data: checkAll_time:false, checkTimes:[], js - methods: // 成立时间 allTime(val){ if(this.checkAll_time == false){ this.checkTimes = .

m0_49806514的博客 613

angularjscheckbox全选_Vue Checkbox全选和选中的方法

全部{{item.name}}export default {data() {return {indeterminate: true,checkAll: false,checkGruop: [],list: [{name: 'aa',code: 1}, {name: 'bb',code: 2}, {name: 'cc',code: 3}];}},methods: {//全选按钮handleChec...

weixin_39554172的博客 182

Vue+Vant制作单选全选全不选以及删除按钮van-checkbox

在官网上看到vant组件特别好用,就尝试使用checkbox制作单选全选,由于是下午头脑不清楚所以没想通思路,导致了一部分的错误,经过我的老大指点,才想通如此简单的思路,就是都亮和都不亮的区别。 全选全不选 1. 引入组件 import Vue from ‘vue’; import { Checkbox, CheckboxGroup } from ‘vant’; Vue.use(Checkb...

weixin_41041567的博客 6626

vue中checkbox 样式自定义重写;循环遍历checkbox,拿到不同的v-model绑定值;及获取当前checked 状态,全选和全不选等功能。

开始写这个功能,不得不吐槽原始的checkbox,灰色小方块的丑陋,虽说eleUI,mintUI,等各种框架的单复选框已经对其优化,但还是不想要这种。那我们就来研究一下怎么处理它。 <section class="box"> <label :for="item3" @click="chooseType($event,index3)" v-for="(item3,index3) in type" class="labelName"> <i

weixin_44446394的博客 1164

vue小案例:实现全选与全不选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...

weixin_42060658的博客 344
上一篇: vue组件开发之用户无限添加自定义填写表单
下一篇: Vue实现用户自定义字段显示数据
#麻辣小龙虾#
博客等级 码龄11年 1万+粉丝 235原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值