在vue中将v-for循环出来的复选框如何实现单选、多选、全选，以及如何将复选框的样式由默认样式改为圆形

最新推荐文章于 2024-04-24 10:14:22 发布

开某人214

最新推荐文章于 2024-04-24 10:14:22 发布

阅读量1.9k

点赞数 1

分类专栏： #Web 文章标签： vue.js javascript 前端 css html

本文链接：https://blog.csdn.net/qq_69635978/article/details/133881505

版权

#Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

初始状态：

<template>
  <div>
    <van-grid :border="false" :column-num="2">

      <van-grid-item v-for="(i,inx) in List" :key="inx">
        <div>
          <input type="checkbox">
        </div>
        <van-image :src=List[inx].imageSrc />
      </van-grid-item>
    </van-grid>

    <div>
      <input type="checkbox">
      <lable>全选</lable>
    </div>

  </div>
</template>

<script>
export default {
  name:"collect01",
  data(){
    return{
    List:[
      {imageSrc: "https://img01.yzcdn.cn/vant/apple-1.jpg"},
      {imageSrc: "https://img01.yzcdn.cn/vant/apple-2.jpg"},
      {imageSrc: "https://img01.yzcdn.cn/vant/apple-3.jpg"},
      {imageSrc: "https://img01.yzcdn.cn/vant/apple-4.jpg"},
      {imageSrc: "https://img01.yzcdn.cn/vant/apple-5.jpg"}
      ]
    }
  },
  methods:{

  }
}

</script>

<style scoped>

</style>

实现改变复选框样式（改为圆形）

实现代码：

<template>
  <div>
    <van-grid :border="false" :column-num="2">

      <van-grid-item v-for="(i,inx) in List" :key="inx">
        <div class="boxs">
          <input type="checkbox" class="radius">
        </div>
        <van-image :src=List[inx].imageSrc />
      </van-grid-item>
    </van-grid>

    <div style="position: relative">
      <input type="checkbox" class="radius">
      <lable>全选</lable>
    </div>

  </div>
</template>

<script>
export default {
  name: "collect01",
  data() {
    return {
      List: [
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-1.jpg"},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-2.jpg"},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-3.jpg"},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-4.jpg"},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-5.jpg"}
      ]
    }
  },
  methods: {}
}

</script>

<style scoped>
.boxs {
  position: absolute;
  top: 5px;
  left: 10px;
  z-index: 10;
}

.radius:checked {
  background:#1673ff
}
.radius {
  width:20px;
  height:20px;
  border:solid 1px grey;
  -webkit-border-radius:50%;
  border-radius:50%;
  font-size:0.8rem;
  -webkit-appearance:none;
}
/*被选中时添加一个对勾图标*/
.radius:checked::after {
  content:'';
  top:5px;
  left:5px;
  position:absolute;
  border:#fff solid 2px;
  border-top:none;
  border-right:none;
  height:6px;
  width:10px;
  /*逆时针旋转45°*/
  transform:rotate(-45deg);
}
</style>

点击复选框实现多选、全选

  methods: {

    selectAll() {
      if (this.allSelected) {
        this.selectedItems = this.List.map((item) => item.id);
      } else {
        this.selectedItems = [];
      }
    },
    selectItem() {
      if (this.selectedItems.length === this.List.length) {
        this.allSelected = true;
      } else {
        this.allSelected = false;
      }
      console.log(this.selectedItems)
    }
  }

实现代码：

<template>
  <div>
    <van-grid :border="false" :column-num="2">

      <van-grid-item v-for="(i,inx) in List" :key="inx">
        <div class="boxs">
          <input type="checkbox" class="radius" :value="i.id" v-model="selectedItems" @change="selectItem">
        </div>
        <van-image :src=i.imageSrc />
      </van-grid-item>
    </van-grid>

    <div style="position: relative">
      <input type="checkbox" class="radius" @change="selectAll" v-model="allSelected">
      <lable>全选</lable>
    </div>

  </div>
</template>

<script>
export default {
  name: "collect01",
  data() {
    return {
      List: [
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-1.jpg",id:1},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-2.jpg",id:2},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-3.jpg",id:3},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-4.jpg",id:4},
        {imageSrc: "https://img01.yzcdn.cn/vant/apple-5.jpg",id:5}
      ],
      selectedItems: [],
      allSelected: false,
    }
  },
  methods: {

    selectAll() {
      if (this.allSelected) {
        this.selectedItems = this.List.map((item) => item.id);
      } else {
        this.selectedItems = [];
      }
    },
    selectItem() {
      if (this.selectedItems.length === this.List.length) {
        this.allSelected = true;
      } else {
        this.allSelected = false;
      }
      console.log(this.selectedItems)
    }
  }
}

</script>

<style scoped>
.boxs {
  position: absolute;
  top: 5px;
  left: 10px;
  z-index: 10;
}

.radius:checked {
  background:#1673ff
}
.radius {
  width:20px;
  height:20px;
  border:solid 1px grey;
  -webkit-border-radius:50%;
  border-radius:50%;
  font-size:0.8rem;
  -webkit-appearance:none;
}
/*被选中时添加一个对勾图标*/
.radius:checked::after {
  content:'';
  top:5px;
  left:5px;
  position:absolute;
  border:#fff solid 2px;
  border-top:none;
  border-right:none;
  height:6px;
  width:10px;
  /*逆时针旋转45°*/
  transform:rotate(-45deg);
}
</style>