vue实现全选和反选功能

本文实例为大家分享了vue实现全选反选功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script type="text/javascript" src = "vue.js"></script>
<body>
    <div id = "test">
      <input type='checkbox' v-model="checkBox.checked" class='input-checkbox' @click='checkedAll'>全选
      <div v-for='checkb in checkboxData'>
        <input  type='checkbox' class='input-checkbox' @click="checkItem" v-model='checkBox.items[checkb.id]'>
        {{checkb.value}}
      </div>

    </div>

</body>
<script>
  var vue = new Vue({
    el:"#test",
    data:{
      checkboxData:[
      {
        id:'1',
        value:'苹果'
      },{
        id:'2',
        value:'荔枝'
      },{
        id:'3',
        value:'香蕉'
      },{
        id:'4',
        value:'火龙果'
      }
      ],
      checkBox:{
        checked:false,
        items:{}
      }

    },
    methods:{
      checkedAll: function() {
        var _this = this;
        console.log(_this.checkboxData);
        console.log(this.checkBox.items);
        this.checkboxData.forEach(function (item) {
          console.log(item.id);
          _this.checkBox.items[item.id] = _this.checkBox.checked;
          console.log(_this.checkBox.items);
        });
        //实现反选

      },
      checkItem:function(){
        var unchecked = 0;
        var _this = this;
        this.checkboxData.forEach(
          function(item) {
            unchecked += (! _this.checkBox.items[item.id]) || 0;
          });
        _this.checkBox.checked = unchecked > 0 ? false : true;
      }

    }

  })
</script>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue2.0在table中实现全选和反选的示例代码

    vue2.0在table中实现全选和反选的示例代码

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的,js是小颖自己写哒,欢迎大家吐槽和点赞,嘻嘻 demo的  git 地址:ShoppingCart 页面效果: 具体怎么实现的呢? 使用localstorage来存储页面信息中已经有写项目是怎么创建的所以小颖在这里就不重复了,其实只是在上篇文章的基础上稍微做了改动: App.vue文件 <temp

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

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

  • vue实现全选、反选功能

    vue实现全选、反选功能

    用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中了一个,那么父级应该被勾选中 如果子集一个都没有选中,那么父级此时应该没有选中 最后提交用户改变后的数组 (大神原谅我的啰嗦哈) 开始上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset

  • vue实现全选和反选功能

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

  • vue+vant-UI框架实现购物车的复选框全选和反选功能

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(item,index) in shoppingListData.rows" :key="index" > <van-checkbox :value="item.goods_id" v-model="item.isChecked" ch

  • js, jQuery实现全选、反选功能

    js ,jq实现全选.反选功能: js:思路:1.点击全选按钮实现,下面内容全选,与反选 2.下面有一个没有选中时,全选按钮不勾选,当全部选中时才全选.这里引入一个计数器,来判断是否全部选中. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 全选<input type

  • javascript实现简单的全选和反选功能

    javascript实现简单的全选和反选功能

    本文实例讲解了javascript实现简单的全选和反选功能的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选</title> </head> <body> <input type="butt

  • 纯javascript实现选择框的全选与反选功能

    HTML部分 <div id="wrap_input_box" > <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <i

  • JavaScript实现全选或反选功能

    JavaScript实现全选或反选功能

    本文实例为大家分享了JavaScript实现全选或反选功能的具体代码,供大家参考,具体内容如下 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例--表格全选</title> <style> table { border: 1px solid; margin: auto; widt

  • vue实现简单全选和反选功能

    本文实例为大家分享了vue实现简单全选和反选的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&

  • vue+vant实现购物车全选和反选功能

    本文实例为大家分享了vue+vant实现购物车全选和反选的具体代码,供大家参考,具体内容如下 这是效果图: 话不多少,直接上代码: <template> <div class="cart"> <div class="st-spacing-main" v-for="(item) in cartInfoList" :key="item.id"> <div class="st-it

  • jquery实现简单的全选和反选功能

    首先我们看个简单的实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&g

随机推荐