在我手动选中和取消选中复选框后，如何使复选框响应 select all function？

Question

I managed to select all check-boxes by getting the input elements via class name and add or remove their "checked" attribute. However, I've discovered that if I checked and unchecked any of the check-boxes, they are no longer affected when I try to select all of them. For example, in the image below, I checked and unchecked the first 3 check-boxes.

Things I have did: 1. Inspecting the elements - don't see any issues because the checkbox elements' attributes still update despite not showing any changes on the page. 2. Console - no errors reported here.

<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)
      }
    }
  }
}

Answer 1

You can change this line arr[i].setAttribute("checked", "") to arr[i].checked = true

and arr[i].removeAttribute("checked") to arr[i].checked = false

You can actually delete check and uncheck methods as well as the watch method. Then change your input checked value. Like this:

 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>