切换处于活动状态时选中某些复选框

Question

你好，我有一个表格，人们需要填写他们的工作日。

我在 Vue 文件中有从星期一到星期日的复选框，如下所示：

<a href="javascript:void(0)" class="form__input"
    @click="setCurrentDay('monday')">
    <input name="checkbox_field0" id="checkbox_field0" type="checkbox" class="special" v-model="monday">
    <label for="checkbox_field0">Monday</label>
</a>
<a href="javascript:void(0)" class="form__input"
    @click="setCurrentDay('tuesday')">
    <input name="checkbox_field1" id="checkbox_field1" type="checkbox" class="special" v-model="tuesday">
    <label for="checkbox_field0">Monday</label>
</a>

等等...

在此之上有一个切换按钮，如果他们在周一至周五工作，则可以点击。当他们点击这个时，我希望周一到周五的复选框被（取消）选中。

开关：

<div class="toggle-switcher">I work monday to friday</div>

使用 Vue 实现此目的的最佳方法是什么？

Answer 1

您可以 uncheck checkboxes 通过执行以下操作：

// Unchecking one checkbox with id 'checkbox_field0'
document.getElementById("checkbox_field0").checked = false;

现在，假设您有一个复选框数组（从星期一到星期五），您可以将它包装在一个 for..of 循环中：

// 'week' is an array of checkboxes per day. 
for(day of week)
  day.checked = false;

或者，如果一周中的几天遵循相同的 ID 结构 ('checkbox_field#')：

// Getting id as "checkbox_field{$i}"
for(let i=0; i<5; i++) {
 const id = "checkbox_field" + i;
 document.getElementById(id).checked = false;
}

Answer 2

这样解决了我的问题：

<label class="toggle-switcher__icon">                                                            
   <inputtype="checkbox" @click="fullWeek = !fullWeek">
   <spanclass="toggle-switcher__inner"></span>
</label>

<a href="javascript:void(0)" class="form__input"
    @click="setCurrentDay('monday')">
    <input name="checkbox_field0" id="checkbox_field0" type="checkbox" class="special"  v-model="weekdays['monday']">
    <label for="checkbox_field0">Monday</label>
</a>
<a href="javascript:void(0)" class="form__input"
    @click="setCurrentDay('tuesday')">
    <input name="checkbox_field1" id="checkbox_field1" type="checkbox" class="special"  v-model="weekdays['tuesday']">
    <label for="checkbox_field0">Monday</label>
</a>

watch: {
            fullWeek() {
                this.weekdays.monday = this.fullWeek;
                this.weekdays.tuesday = this.fullWeek;
                this.weekdays.wednesday = this.fullWeek;
                this.weekdays.thursday = this.fullWeek;
                this.weekdays.friday = this.fullWeek;
            }
        }

切换处于活动状态时选中某些复选框

Check certain checkboxes when toggle is active

checkbox

vue.js