Js复选框实现全选、全不选、反选

最新推荐文章于 2021-04-15 16:18:35 发布

舕姣妢苼

最新推荐文章于 2021-04-15 16:18:35 发布

阅读量348

点赞数

分类专栏：前端 # Javascript # Vue 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/jolieLi2019888/article/details/105220948

版权

Vue 同时被 3 个专栏收录

6 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

Javascript

2 篇文章

订阅专栏

本文介绍了如何在Vue.js环境中利用JavaScript实现复选框的全选、全不选和反选功能。通过HTML的`input`元素创建复选框，并在Vue组件中进行逻辑控制，达到所需交互效果。

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

复选框为checkbox对象

通过`input`就可以将一个简单的复选框呈现在页面上

<input type="checkbox" />

要实现的大概就是这样一个页面

<template>
  <div class="checkbox">
    <div class="action">
      <input type="checkbox" id="boxid" @click="setAllNo()" />
      全选/全不选
      <br />
      <input type="checkbox" value @click="setOthers()" />
      反选
      <br />
    </div>
    <input type="checkbox" name="love" />
    综艺
    <br />
    <input type="checkbox" name="love" />
    电视剧
    <br />
    <input type="checkbox" name="love" />
    电 影
    <br />
    <input type="checkbox" name="love" />
    动 漫
    <br />
  </div>
</template>
<script>
export default {
  name: "Check1",
  data() {
    return {};
  },
  mounted() {
    console.log(33333);
  },
  computed: {
    // document.getElementsByName('love')
  },
  methods: {
    //反选
    setOthers() {
      var loves = document.getElementsByName("love");
      loves.forEach(item => {
        if (item.checked == false) {
          item.checked = true;
        } else {
          item.checked = false;
        }
      });
    },
    //全选/全不选
    setAllNo() {
      let box = document.getElementById("boxid");
      let loves = document.getElementsByName("love");
      if (box.checked == true) {
        loves.forEach(item => {
          item.checked = true;
        });
      } else {
        loves.forEach(item => {
          item.checked = false;
        });
      }
    }
  }
};
</script>
<style scoped>
</style>

vue中实现复选，反选