如何在多个选择按钮中获取更改后的选择按钮？

<input type="checkbox" id="option1" class="option">
<input type="checkbox" id="option2" class="option">
<input type="checkbox" id="option3" class="option">

<script>
  const options = document.querySelectorAll('.option');

  options.forEach(option => {
    option.addEventListener('change', () => {
      const selectedOptions = Array.from(options)
        .filter(option => option.checked)
        .map(option => option.id);
      
      console.log(selectedOptions);
    });
  });
</script>

<div id="app">
  <input type="checkbox" v-model="selectedOptions.option1">
  <input type="checkbox" v-model="selectedOptions.option2">
  <input type="checkbox" v-model="selectedOptions.option3">
  
  <button @click="showSelectedOptions">获取选中的选择按钮</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      selectedOptions: {
        option1: false,
        option2: false,
        option3: false
      }
    },
    methods: {
      showSelectedOptions() {
        const selectedOptions = Object.entries(this.selectedOptions)
          .filter(([key, value]) => value)
          .map(([key, value]) => key);
          
        console.log(selectedOptions);
      }
    }
  });
</script>

<form id="myForm">
  <input type="checkbox" name="option1" value="1">
  <input type="checkbox" name="option2" value="2">
  <input type="checkbox" name="option3" value="3">
  
  <button type="submit">提交</button>
</form>

<script>
  const form = document.getElementById('myForm');
  
  form.addEventListener('submit', event => {
    event.preventDefault(); // 阻止表单默认提交行为
    
    const formData = new FormData(form);
    const selectedOptions = [];
    
    for (const pair of formData.entries()) {
      selectedOptions.push(pair[0]);
    }
    
    console.log(selectedOptions);
  });
</script>