精华内容
下载资源
问答
  • 下面小编就为大家分享一篇Vue自定义指令实现checkbox全选功能的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue.js实现checkbox全选

    千次阅读 2017-04-26 11:05:25
    使用vue.js实现简单的checkbox全选demo
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
        <script>
            window.onload = function () {
                var c = new Vue({
                    el:'.box',
                    data:{
                        selectArr: [],
                        proData:[{
                            "name": "111"
                        }, {
                            "name": "222"
                        }, {
                            "name": "333"
                        }, {
                            "name": "444"
                        }]
                    },
                    methods:{
                        selectAll:function (event) {
                            var _this = this;
                            console.log(event.currentTarget)
                            if (!event.currentTarget.checked) {
                                this.selectArr = [];
                            } else { //实现全选
                                _this.selectArr = [];
                                _this.proData.forEach(function(item, i) {
                                    _this.selectArr.push(item.name);
                                });
                            }
                        }
                    }
                })
            }
    
        </script>
    </head>
    <body>
        <div class="box">
            <div class="hello">
                <ul>
                    <li v-for="(index, item) in proData">
                        <label :for="index">
                            <input :id="index" type="checkbox" :value="item.name" v-model="selectArr">
                        </label>{{item.name}}
                    </li>            </ul>
                <button type="">删除</button>{{selectArr}}
                <label>
                    <input type="checkbox" class="checkbox" @click="selectAll" />全选
                </label>
            </div>
        </div>
    </body>
    </html>
    展开全文
  • vue 实现checkbox全选,单选以及删除 <template> <div> <input type='checkbox' class='input-checkbox' :checked="fruitIds.length === fruits.length" @click='checkedAll()'>全选 <...

    vue 实现checkbox的全选,单选以及删除

    <template>
        <div>
          <input type='checkbox' class='input-checkbox' :checked="fruitIds.length === fruits.length" @click='checkedAll()'>全选
          <div v-for='(fruit, index) in fruits' :key="index">
              <!--判断fruitIds是否包含当前fruit,fruitIds.indexOf(fruit.fruitId)返回包含fruit的下标, 若不包含则返回-1-->
             <input type='checkbox' :checked="fruitIds.indexOf(fruit.fruitId)>=0" name='checkboxinput' class='input-checkbox' @click='checkedOne(fruit.id)'>
          </div>
          <!--默认删除按钮不能点击, 当选中某一checkbox时可以删除-->
          <button :disabled="!fruitIds.length>0" value="Delete" @click="deleteFruits()">Delete</button>
        </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          fruits:[{
            id:'1',
            value:'苹果'
          },{
            id:'2',
            value:'荔枝'
          },{
            id:'3',
            value:'香蕉'
          },{
            id:'4',
            value:'火龙果'
          }],
          fruitIds:['1','3','4'],
          // 初始化全选按钮, 默认不选
          isCheckedAll: false
        }
      },
      methods:{
        checkedOne (fruitId) {
            let idIndex = this.fruitIds.indexOf(fruitId)
            if (idIndex >= 0) {
              // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
              this.fruitIds.splice(idIndex, 1)
            } else {
               // 选中该checkbox
               this.fruitIds.push(fruitId)
               if(this.fruitIds.length == this.fruits.length){ 
                  this.isCheckedAll=true; 
               } else {
                  this.isCheckedAll=false; 
               }
            }
        },
        checkedAll () {
          this.isCheckedAll = !this.isCheckedAll
          if (this.isCheckedAll) {
            // 全选时
            this.fruitIds = []
            this.fruits.forEach(function (fruit) {
              this.fruitIds.push(fruit.fruitId)
            }, this)
          } else {
            this.fruitIds = []
          }
        },
        deleteFruits () {
    
        }
      }
    }
    </script>
    

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue checkbox 实现全选,取消全选

    千次阅读 2018-06-11 06:17:31
    背景:在vue项目中引入了jq的datatables表格插件,自己在每行的第一项添加了一个checkbox 那么如何实现全选,取消全选,拿到checked=true的值呢?解决方案:一:获取到checked=true的值:&lt;input type="...

    背景:在vue项目中引入了jq的datatables表格插件,自己在每行的第一项添加了一个checkbox

             那么如何实现全选,取消全选,拿到checked=true的值呢?


    解决方案:

    一:获取到checked=true的值:

    <input type="checkbox" class="inputcheckbox" name="" v-model="checked" :value="data[index]">复制代码

    checked 为数组 【 】

    我们最后打印this.checked 就可以拿到checked=true的所有值!

    二:所有的checkbox选中如何触发thead的input checkbox也选中?

    <input type="checkbox" :checked="data.length === checked.length" class="inputcheckbox" name="select_all" @click="checkedAll">复制代码

    data 是表格里所有的值,checked是checked=true的值

    三:点击表头的input checkbox 如何将所有checkbox全选 ?

    data return {} 中定义       isCheckedAll: false,
    复制代码

    checkedAll () {  // 点击全选checkbox会触发此事件
          //  全选后 取消其中一个checkbox的选中状态  此时isCheckedAll还是true ,优化后再次点击依旧是全选
          if (this.data.length !== this.checked.length && this.isCheckedAll === true) {
            this.isCheckedAll = true
          } else {
            this.isCheckedAll = !this.isCheckedAll
          }
          if(this.isCheckedAll) {    //  全选
            this.checked = []
            this.data.forEach(function (data) {
              this.checked.push(data)
            }, this)
          } else {
            this.checked = [] //  取消全选
          }
        },
    复制代码


    展开全文
  • vue+element实现checkbox全选,全不选功能 我看了官方提供的案例,主要通过indeterminate属性来实现全选的效果。但是不太符合我们公司的需求,我就在官方基础上做了一点修改,从而实现全选和全不选的效果。 我没有用...

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

    上代码:

    <template>
      <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
      </el-checkbox-group>
    </template>
    <script>
      export default {
        data() {
          return {
            checkAll: true, // 默认全选,主要通过该值控制全选和全不选
            checkedCities: ['上海', '北京'],
            cities: ['上海', '北京', '广州', '深圳']
          };
        },
        methods: {
          handleCheckAllChange() {
            this.checkedCities = this.checkAll ? this.cities : [];
          },
          handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
          }
        }
      };
    </script>
    
    展开全文
  • Vue自定义指令实现checkbox全选功能

    万次阅读 2017-01-06 14:44:38
    最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进。...
  • Vue实现checkbox全选和取消全选

    千次阅读 2018-12-13 11:16:59
    关键:复选按钮绑定同一个v-mode数组变量,数组里面有相应的value就被选中,选择就...--给全选按钮绑定v-mode变量,值为true时就是选中状态,绑定点击事件,执行全选和反选操作--&gt; &lt;input type='ch...
  • vuejs实现checkbox全选和全不选

    千次阅读 2018-05-16 23:42:32
    最近一直在用vue,有个功能是要实现全选和取消全选的功能,于是想了一下要怎么做。 效果如下: 代码如下: &lt;!DOCTYPE html&gt; &lt;...vue实现checkbox全选和全不选&lt;/t
  • VUE 实现checkbox全选/反选

    千次阅读 2018-07-20 16:28:50
    1、页面结构部分 &lt;template&gt; &...--给全选按钮绑定v-mode变量,值为true时就是选中状态,绑定点击事件,执行...input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='...
  • input type='checkbox' class='input-checkbox' :checked="fruitIds.length === fruits.length" @click='checkedAll()'>全选 <div v-for='(fruit, index) in fruits' :key="index"> <!--判断fruitIds...
  • <template> <...input type='checkbox' class='input-checkbox' :checked="fruitIds.length === fruits.length" @click='checkedAll()'>全选 <div v-for='(fruit, index) in fru.
  • 父组件的代码如下 ! 子组件的代码块 {{ item.menName }}-level{{ item.menLevel }} 以上是我需要的多级全选反选,结合vue和element-ui实现的,如有问题欢迎大家提意见及解决方案哈!!
  • vue.js简单实现checkbox全选,反选,多选

    千次阅读 2018-11-09 09:54:17
    1.html &lt;table&gt; &lt;tr&gt; &lt;th class=""&gt; &lt;...checkbox" id="checkAll" @click="clickCheckAll()" v-model=
  • 前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选 、Vue.js实现checkbox全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选。小颖当时看他给的截图,也没太明白,后来手动...
  • Vue 实现checkbox的单选以及全选 <template> <div> <span>全选</span> <input type="checkbox" v-model="checkAll" /> <div v-for="(item,index) in test" :key="index"> ...
  • 基于vue element el-checkbox全选功能实现 <template> <div class="page-clientsManage"> <el-row class="pa-20"> <el-card class="table-card mt-20"> <el-row slot="header" ...
  • 本文实例讲述了vue.js实现全选与全不选功能。分享给大家供大家参考,具体如下:elementui是有checkbox组件,不过问题在于checkbox组件内只能嵌套简单的字符串,如果要嵌入标签怎么办?首先渲染页面:全选订单号:{{...
  • Vue中的checkbox全选全不选的实现

    千次阅读 2018-10-05 09:12:02
    全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuery到vue的转变主要是一个思想想的转变,是将原有的直接操作dom的思想转变到操作...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 186
精华内容 74
关键字:

vue实现checkbox全选

vue 订阅