如何同时勾选和取消勾选循环中的其他复选框？

// HTML代码
<input type="checkbox" class="checkbox">复选框1
<input type="checkbox" class="checkbox">复选框2
<input type="checkbox" class="checkbox">复选框3

// JavaScript代码
var checkboxes = document.getElementsByClassName('checkbox');
var masterCheckbox = document.getElementById('masterCheckbox');

masterCheckbox.addEventListener('change', function() {
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = masterCheckbox.checked;
  }
});

// HTML代码
<input type="checkbox" class="checkbox">复选框1
<input type="checkbox" class="checkbox">复选框2
<input type="checkbox" class="checkbox">复选框3

// JavaScript代码
$('.masterCheckbox').change(function() {
  $('.checkbox').prop('checked', $(this).prop('checked'));
});

// Vue.js代码
<template>
  <div>
    <input type="checkbox" v-model="masterCheckbox">全选
    <input type="checkbox" v-for="checkbox in checkboxes" v-model="checkbox.checked">{{ checkbox.label }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      masterCheckbox: false,
      checkboxes: [
        { label: '复选框1', checked: false },
        { label: '复选框2', checked: false },
        { label: '复选框3', checked: false }
      ]
    };
  }
};
</script>