手动选中和取消选中复选框后，如何使复选框响应全选功能？答案

【问题标题】：How do I make check-boxes respond to a select all function after I manually checked and unchecked them?手动选中和取消选中复选框后，如何使复选框响应全选功能？
【发布时间】：2020-09-10 08:23:28
【问题描述】：

我设法通过类名获取输入元素并添加或删除它们的“checked”属性来选择所有复选框。但是，我发现如果我选中和取消选中任何复选框，当我尝试选择所有复选框时它们不再受到影响。例如，在下图中，我选中并取消选中了前 3 个复选框。

我做过的事情： 1. 检查元素 - 看不到任何问题，因为尽管页面上没有显示任何更改，但复选框元素的属性仍在更新。 2. 控制台 - 这里没有报告错误。

<table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="checked"></th>
        <th>ID</th>
        <th>Course Title</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="course in courses" :key="course.id">
        <td><input type="checkbox" class="inputs"></td>
        <td>{{course.id}}</td>
        <td>{{course.title}}</td>
        <td>{{course.price}}</td>
      </tr>
    </tbody>
  </table>

export default {
  name: 'CourseTable',
  data () {
    return {
      courses: udemy.results,
      checked: false
    }
  },
  methods: {
    check (arr) {
      for(let i=0; i<arr.length; i++){
        arr[i].setAttribute("checked", "")
      }
    },
    uncheck (arr) {
      for(let i=0; i<arr.length; i++){
        arr[i].removeAttribute("checked")
      }
    }
  },
  watch: {
    checked: function () {
      var inputs = document.getElementsByClassName("inputs")
      if(this.checked){
        this.check(inputs)
      }else{
        this.uncheck(inputs)
      }
    }
  }
}

【问题讨论】：

标签： javascript html vue.js dom

【解决方案1】：

你可以把这行arr[i].setAttribute("checked", "")改成arr[i].checked = true

和arr[i].removeAttribute("checked") 到arr[i].checked = false

您实际上可以删除检查和取消检查方法以及监视方法。然后更改您输入的检查值。像这样：

new Vue({
  el: "#app",
  data() {
    return {
      checked: false,
      courses: [{
          id: "362328",
          title: "AWS",
          price: "179.99"
        },
        {
          id: "625204",
          title: "The web",
          price: "179.99"
        }, {
          id: "567828",
          title: "Complete",
          price: "179.99"
        }, {
          id: "756150",
          title: "Angular",
          price: "179.99"
        }, {
          id: "950390",
          title: "Machine",
          price: "179.99"
        }, {
          id: "793796",
          title: "Excel",
          price: "179.99"
        }
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="checked"></th>
        <th>ID</th>
        <th>Course Title</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="course in courses" :key="course.id">
        <td><input type="checkbox" class="inputs" :checked='checked'></td>
        <td>{{course.id}}</td>
        <td>{{course.title}}</td>
        <td>{{course.price}}</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：