博主信息
拾一枝樱花的博客
博文
31
粉丝
0
评论
2
访问量
32709
积分:0
P豆:68

vue中循环遍历checkbox,拿到不同的v-model绑定值;

2021年07月01日 14:54:46阅读数:454博客 / 拾一枝樱花的博客/ vue

<section class="box">

     <label  :for="item3" @click="chooseType($event,index3)"  v-for="(item3,index3) in type"  class="labelName">

        <input type="checkbox" :value="item3" :id="item3" v-model="checkedValue" class="checkboxList">            

        <div class="name">{{item3}}</div>         

         // checkbox的v-model绑定值一定要是数组 

        {{checkedValue}} 

     </label>

     <button @click="chooseQu">全选</button>

     <button @click="chooseNo">全不选</button>

  </section>


data(){

        return{

          checkedValue: [],

          type:['a','b','c','d']   // 测试数据,可在mounted钩子函数中将后台数据赋值

        }

},

methods:{

        chooseType(e,val){

          console.log(e.target.checked)   // 可获取当前的checked 状态

          console.log(val)                // 可获取到当前的下标。


        },

        chooseQu(){

          // document.querySelectorAll('.checkboxList').setAttribute("checked","true");

          this.checkedValue = this.type ;  //将原数据全部赋值给checkedValue,全部置为true.  

        },

        chooseNo(){

          this.checkedValue = [] ;    // checkedValue 为空即将checkedValue全部置为false,

        }


  }


版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论