精华内容
下载资源
问答
  • <!... <... <head>...meta charset="UTF-8">...script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script> </head> <body> <div id="app"> <...

     

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
    	</head>
    
    	<body>
    		<div id="app">
    			<div>
    				<input type="checkbox" id="all" v-model="checked" @change="checkAll" />
    				<!-- 全选 -->
    				<label for="all">{{selectAll}}</label>
    			</div>
    			<div v-for="(item,index) in list">
    				<!-- 复选框必须有索引值,否则选中任何一个,其他都会选中,v-model双向绑定 -->
    				<!-- v-model必须绑定创建不同的对象 -->
    				<input type="checkbox" v-model="item.checkModel" :key="item.index" @change="checkBox(item)" />{{item.seller}}
    			</div>
    		</div>
    	</body>
    	<script>
    		var app = new Vue({
    			el: "#app",
    			data: {
    				list: [{
    						seller: "商家1",
    					}, {
    						seller: "商家2",
    					}] //数据
    					,
    				selectAll: '全选',
    				checkModel: [],
    				checked: false, //控制是否全选
    			},
    			methods: {
    				checkAll() {
    					// 触发全选按钮事件
    					// 1.获取下面所有的需要选中的复选框
    					// 2.给每一个复选框设上checked:true的状态
    					// 如果为没有一个选中的复选框
    					if(this.checked) {
    						this.list.forEach((item) => {
    							item.checkModel = true
    						})
    
    					} else {
    						this.list.forEach((item) => {
    							item.checkModel = false
    						})
    					}
    				},
    				checkBox(item) {
    					// 1.获取总复选框数量
    					// 2.循环遍历选中的总数大于等于list
    					if(this.list.every(item => item.checkModel)) {
    						// 3.全选按钮选中
    						this.checked=true
    					} else {
    						// 4.全选按钮不选中
    						this.checked=false
    					}
    				}
    			}
    
    		})
    	</script>
    
    </html>

     

    展开全文
  • 我点击全选框,内容全选了,但是全选框没有亮,它默默地做出了自己的贡献不需要任何回报 经过本仙女的仔细考虑,发现了一个问题,get 没有return 啊,修改如下: get : function () { return ...

    这个坑我并不想表达任何情绪,保持微笑

    HTML如下:

    <input class="toggle-all" type="checkbox" v-model="allDone">

    错误js如下:

    //全选与取消全选事件
            allDone: {
                get: function () {
                    this.remaining ===0
                },
                set: function (value) {
                    this.todos.forEach(function(todo) {
                        todo.completed = value
                    }, this);
    
                } 
            },

    出错情况如下:

    我点击全选框,内容全选了,但是全选框没有亮,它默默地做出了自己的贡献不需要任何回报

    这里写图片描述

    这里写图片描述

    经过本仙女的仔细考虑,发现了一个问题,get 没有return 啊,修改如下:

    get: function () {
         return this.remaining ===0
    },

    错因:当第一次点击时,allDone执行了,但是它在等待get return一个值,没有等到,再次点击,才能被选中

    展开全文
  • //全选框事件 changeAll(){ for(var i = 0 ; i;i++){ this.dataList[i].isSelected=this.allchange; } }, 3.点击确定按钮 储存/获取 选中的对象 //确定按钮绑定事件 okButton(){ //将dataList中is...

    一、首先附上页面效果图+代码。

     

    <div style="padding-right:7px;padding-left:10px ;padding-top:5px;>
        <table class="table-bordered"  style="font-size: 12px ;width:95%;">
            <thead style="text-align:center;font-size:13px">
               <tr>
                  <th>名称</th>
                  <th>编号</th>
                  <th>型号</th>
                  <th style="width: 10%">
                     <input type="checkbox" v-model="allchange"  @change="changeAll()" />
                   </th>
               </tr>
            </thead>
            <tbody style="text-align:center;font-size:12px;word-break:break-all;">
               <tr v-for="(item,index) in dataList" :key="index">
                  <td>{{item.AAA}}</td>
                  <td >{{item.BBB}}</td>
                  <td>{{item.CCC}}</td>
                  <td><input type="checkbox"  @change="changeOne(item)"  v-model="item.isSelected"></td>
               </tr>
            </tbody>
        </table>
    </div>          

    二、需要声明的参数:

    dataList:[], //放入初始的数据集合

    allchange:false,//初始全选选按钮控制

    selectList:[];//用来储存最终选择的集合

    三、JS方法:

    1.获取后台传的数据

            toLoading(){  //加载数据的方法
                this.allchange=false,  //全选框默认未不选
                Indicator.open('加载中...')
                getHoldInstrument(this.taskId).then((data) => {
                    Indicator.close();
                    if (data.data) {
                        this.dataList=data.data;    
                        for(let i = 0 ;i<this.dataList.length; i++){
                            //为每一条数据增加一个是否选中属性
                            this.$set(this.dataList[i],"isSelected",false);
                        }                
                    }               
              })
              .catch((error) => {
                  Indicator.close();
                  this.$toast.showToast('获取数据失败')
              })
            },

    2、单选已经全选框绑定方法

            //子选框事件
            changeOne(item){
                //当每一个item.isSelected 都为true 返回true,否则返回false
                this.dataList.every(function(item){
                    return item.isSelected==true;
                }) ? this.allchange = true : this.allchange = false;
            },
            //全选框事件
            changeAll(){
                 for(var i = 0 ; i<this.apparatusData.length;i++){
                     this.dataList[i].isSelected=this.allchange;
                 }              
            },

    3.点击确定按钮 储存/获取 选中的对象

            //确定按钮绑定事件
            okButton(){
                //将dataList中isSelected 属性 为true 赋值到 selectList 中
                this.selectList= this.dataList.filter(function(item){
                    return item.isSelected == true
                })
                //打印输出
                console.log("this.selectList:"+JSON.stringify(this.selectList));
            }

     

    展开全文
  • vue如何实现全选和反选功能发布时间:2021-04-23 14:21:23来源:亿速云阅读:77作者:小新这篇文章给大家分享的是有关vue如何实现全选和反选功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编...

    vue如何实现全选和反选功能

    发布时间:2021-04-23 14:21:23

    来源:亿速云

    阅读:77

    作者:小新

    这篇文章给大家分享的是有关vue如何实现全选和反选功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

    为什么要使用Vue

    Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。

    vue实现全选反选功能的具体代码,具体内容如下html>

    Title

    全选

    {{checkb.value}}

    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;

    }

    }

    })

    感谢各位的阅读!关于“vue如何实现全选和反选功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

    展开全文
  • 2. 当所有选择框都被选中时,勾选全选框。 详细思路: 1.点击全选框选中所有选择框:  给全选框绑定一个值,然后添加change时间,当全选框的值改变时给所有选择框的值赋与全选框的值。 2.当所有选择框都被选中...
  • 这次给大家带来vue做出全选反选功能,vue做出全选反选功能的注意事项有哪些,下面就是实战案例,一起来看一下。z全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多。最近在使用vue...
  • Vue 复选全选 配合ajax删除 Springboot ...这是Vue全选代码 checkedAll: function() { var _this = this; //遍历数组列表 this.newss.forEach(function(ns, index) { if(_this.nids.indexOf...
  • Vue 复选 checkbox 全选与取消全选 组件 <template> <p> 全选: </p> <input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()"> <label for...
  • vue 多选 全选

    2020-01-06 15:39:10
    <template> <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;"> // 全选按钮的部分 <Checkbox // value来判断是否点亮全选框 :val...
  • vue单选全选

    2020-07-31 16:00:53
    一般的后台管理系统都要用到单选全选,再进行一些批量的操作,下面分享一下我开发的一点小经验(我是小菜鸡,不喜可喷),话不多说,代码搞起来,俺使用了element-ui中的 **el-checkbox** 标签,网址如下 ...
  • vue复选 全选 反选 删除功能 组件 代码地址: https://gitee.com/WzQw/codes/otuc4znsgvx01y36arfpj24
  • Vue复选全选

    2019-04-27 15:53:00
    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue复选全选</title> </head> <body> <div id="app"> ...
  • 全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuery到vue的转变主要是一个思想想的转变,是将原有的直接操作dom的思想转变到操作...
  • vue实现全选全不选

    万次阅读 2018-03-27 13:17:21
    全选功能可以说是前端开发中非常常见的一个功能。从jQuery到vue的转变主要是一个思想想的转变,用数据驱动dom,也是vue框架的一个核心思想,思想转变过来,对功能的实现自然容易理解一些。
  • vue】框架之el-select的全选

    千次阅读 2018-06-29 18:42:28
    1.效果 2.实现 < ...关于vue框架之el-select的全选的实现,记录下来以便学习 参考1:https://www.cnblogs.com/sinosaurus/p/9047395.html 参考2:http://element.eleme.io/#/zh-CN/component/select
  • Vue实现全选反选功能

    千次阅读 2018-04-28 13:35:34
    整体思路:1、点击一个单选,记录当前的下标,存入数组A中。...3、判断A和B的长度是否相等来实现全选和反选。 下面贴出全部代码 <template> <div> <input type='checkbox' class='input...
  • vue复选框全选全不选

    千次阅读 2018-12-14 21:29:54
    全选: ()"> 多个复选: 选择的值为:{{checkedNames}} var app= new Vue({ el: '#app', data: { checked: false, checkedNames: [], checkedArr:["Runoob","Google","Taobao"] }...
  • 该实例实现复选全选与反全选。 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习Vue</title> <!-- 使用CDN引入Vue.js --> ...
  • Vue实现全选,反选,全不选 在vue中实现默认选中以及获取单选/复选的value值都会用到同一个方法,那就是在data中定义一个数组,然后用v-model=“这个数组” data: { whoms:[1,2], } 这样就会默认选中value值是1...
  • 1、解决vue页面渲染出现花括号的问题: 在最外层的dom节点上加上v-cloak ,css里面 <div class="detail-content" id="detail-content" v-cloak>...2、vue复选 模拟checkbox多选全选 ...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 242
精华内容 96
关键字:

vue全选框

vue 订阅