使用vue模拟复选框多选以及全选的效果

原创于 2019-11-26 15:34:44 发布 · 544 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue 模拟复选框多选全选

本文详细介绍了如何在Vue项目中利用计算属性和事件处理实现复选框的全选和多选效果，包括单个选项选择、全选按钮控制所有选项以及反选功能。通过实例代码解析，帮助开发者掌握这一常见交互的实现技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="list">
    <div @click="checkAll">全选</div>
    <div class="checkList" v-for="(item,index) in List" :key="index">
        <div>
            <span class="check" :class="{'isChecked':Listids.indexOf(item.id)>=0}"  @click="checkOne(item.id)">{{item}}</span>
        </div>
    </div>
</div>

data:function(){
          return{
              List:[
                  {id:1,value:'one'},
                  {id:2,value:'two'},
                  {id:3,value:'three'}
              ],
              Listids:[],
              isCheckAll:false,
          }
},
methods:{
          checkOne(id){
              var ids = this.Listids.indexOf(id);
              if(ids>=0){
                  //如果包含了该ID，则删除（单选按钮由选中变为非选中状态）
                  this.Listids.splice(ids,1);
              }else{
                  //选中该按钮
                  this.Listids.push(id);
              }
              console.log(this.Listids);
          },
          checkAll(){
              //全选
              let that = this;
              that.isCheckAll = !that.isCheckAll;
              if(that.isCheckAll){
                  that.Listids=[];
                  that.List.forEach(function(elm){
                      that.Listids.push(elm.id)
                  })
              }else{
                  that.Listids=[];
              }
              console.log(this.Listids);
          }
}

.checkList{
display:flex;
}
.isChecked{
background:red;
}