vue checkbox 全选 数据的绑定及获取和计算方法

html

<input type='checkbox' v-model='checkboxModel' :value='z.coach_id+"-"+z.amount' :i="dianji" @click="lll">

第一个CheckBox

<span><input type='checkbox' v-model='checked' v-on:click='checkedAll'><span class="select-all">全选</span></span>

第二个

定义

return {
 dianji:'12',
 list: [],
 value:{},
 value1:{},
 checkAll: false,
 checkArr:[],
 checkboxModel:[],
 wodeshi:'0',
 checked:false
}
lll: function(){
 var self = this;
 var sum=0;
 setTimeout(function(){
 for(var x in self.checkboxModel){
 sum += parseInt(self.checkboxModel[x].split('-')[1])
 }
 self.wodeshi=sum;
 },0)
 // console.log(self.checkboxModel)
},
checkedAll: function() {
 var _this = this;
 if (this.checked) {//实现反选
 _this.checkboxModel = [];
 }else{//实现全选
 _this.checkboxModel = [];
 _this.list.forEach(function(z) {
 _this.checkboxModel.push(z.coach_id+'-'+z.amount);
 });
 }
 if(_this.checkboxModel.length==0){
 this.wodeshi=0;
 // console.log(_this.checkboxModel);
 }else {
 var self =this;
 var sum =0;
 for(var x in self.checkboxModel){
 sum += parseInt(self.checkboxModel[x].split('-')[1])
 }
 self.wodeshi=sum;
 }
},

以上这篇vue checkbox 全选 数据的绑定及获取和计算方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue2.0中vue-cli实现全选、单选计算总价格的实例代码
  • 使用vue.js实现checkbox的全选和多个的删除功能
  • 利用Vue.js实现checkbox的全选反选效果
赞 (0)

相关推荐

  • 利用Vue.js实现checkbox的全选反选效果

    前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'

  • 使用vue.js实现checkbox的全选和多个的删除功能

    template代码: <template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="index" v-model="selectArr">

  • vue2.0中vue-cli实现全选、单选计算总价格的实例代码

    vue2.0中vue-cli实现全选、单选计算总价格的实例代码

    由于工作的需要并鉴于网上的vue2.0中vue-cli实现全选.单选方案不合适,自己写了一个简单实用的.就短短的126行代码. <template> <div> <table> <tr> <td><input type="checkbox" v-model="checkAll">全选({{checkedCount}})</td> <td>产品名称</td> &

  • vue checkbox 全选 数据的绑定及获取和计算方法

    html <input type='checkbox' v-model='checkboxModel' :value='z.coach_id+"-"+z.amount' :i="dianji" @click="lll"> 第一个CheckBox <span><input type='checkbox' v-model='checked' v-on:click='checkedAll'><span clas

  • vue 实现全选全不选的示例代码

    vue 实现全选全不选的示例代码

    全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多.最近在使用vue前端框架重构之前的项目.从jQuery到vue的转变主要是一个思想想的转变,是将原有的直接操作dom的思想转变到操作数据,用数据驱动dom,也是vue框架的一个核心思想,思想转变过来,对功能的实现自然容易理解一些. 例如下面这个简单的demo 按照jQuery的思想来做的话,要选中全选checkbox和所有的checkbox项,分别注册选中事件,判断选中状态来给相关的checkbox设置对应的状

  • Vue自定义指令实现checkbox全选功能的方法

    最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进. 上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id

  • javascript使用avalon绑定实现checkbox全选

    javascript使用avalon绑定实现checkbox全选

    duplex双工绑定是avalon绑定里面最有趣的一个,因为它在内部帮开发者做了很多事,让开发者写的代码减少,代码更优雅.下面随便演示一个常见的checkbox全选. 要求:(老掉牙了,还是说一下) 1.勾选了全选框后,下面的子选框全被勾选:没勾选全选框,则子选框全部不勾选 2.子选框如果有一个未勾选,则取消全选框勾选: 3.子选框全部勾选,则勾选全选框 <!DOCTYPE html> <html> <head> <meta http-equiv="Co

  • vue实现全选功能

    本文实例为大家分享了vue实现全选功能的具体代码,供大家参考,具体内容如下 全选思路 1.准备标签,样式,js,准备数据 2.将数据循环展示在页面上, 在li 里v-for 3.在全选框 v-model = "isAll" //总的状态 4.小选框 v-model = "" //单个的状态 5.小选影响全选 ... 定义计算属性 isAll 统计小选框的状态, every查找数组里不符合条件的,直接返回false ...判断每一个小选框的状态, 只要有一个小选框的状

  • vue实现全选和反选功能

    本文实例为大家分享了vue实现全选反选功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script type="text/javascript" src = "vue.j

  • Android RecycleView使用（CheckBox全选、反选、单选）

    本文实例为大家分享了CheckBox全选.反选.单选的具体代码,供大家参考,具体内容如下 MainActiivity package com.bwie.day06; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.Recyc

  • jQuery实现table表格checkbox全选的方法分析

    jQuery实现table表格checkbox全选的方法分析

    本文实例讲述了jQuery实现table表格checkbox全选的方法.分享给大家供大家参考,具体如下: 今天在页面中使用jQuery实现了全选框操作,如图: 具体的实现过程很简单: 第一步 设计一个简单的表格: 设置表格列标题,在列标题中的单选框为全选框: 设置表格题,表格题的单选框就是普通的单选框啦: <table> <thead> <tr> <td> <input type="checkbox" onclick="s

  • javascript checkbox全选和反选的简单实现

    javascript checkbox全选和反选的简单实现 发现这样写checkbox全选和反选最简洁明了. function tempUser(val){ $("input[name='userid']").each(function() { this.checked = val; }); } <input type='checkbox' onclick="tempUser(this.checked)" /> <input type='check

  • 基于JS实现checkbox全选功能实例代码

    基于JS实现checkbox全选功能实例代码

    需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l

随机推荐