Check certain checkboxes when toggle is active

Question

Hi I have a form where people need to fill out on what days they work.

I have checkboxes from monday to sunday in a Vue file like this:

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

and so on...

Above this there is a toggle people can click if they work monday to friday. When they click this I want the checkboxes monday to friday to be (un)checked.

the toggle:

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

What is the best way to achieve this with Vue?

Javier M · Accepted Answer · 2021-10-18 13:20:52Z

1

You can uncheck checkboxes by doing:

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

Now, you could wrap this inside a for..of loop, assuming you have an array of checkboxes (from monday to friday):

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

Or, if you follow the same ID structure ('checkbox_field#') for the days of the week:

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

answered Oct 18, 2021 at 13:20

Javier M

1927 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

romidoco · Accepted Answer · 2021-10-19 15:18:42Z

solved my problem like this:

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

Collectives™ on Stack Overflow

Check certain checkboxes when toggle is active

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related