Change style when checkbox is checked - Vue

Question

I have a form with some checkboxes for each day of the week, what I want to do is that when the checkbox is clicked, it turns blue in the background and the white letters.

new Vue({
  el: "#app",
  data: {

  },
  methods: {

  }
})

.label-checkbox {
  margin-right: 0.87rem;
  margin-left: auto;
  border: 1px solid #4273DE;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  color: #4273DE;
}

.check-day {
  visibility: hidden;
  position: absolute;
  right: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <label class="label-checkbox" for="monday">
    <input type="checkbox" class="check-day" id="monday" value="monday" />
    Mon
  </label>
  <label class="label-checkbox" for="tuesday">
    <input type="checkbox" class="check-day" id="tuesday" value="tuesday" />
    Tues
  </label>
  <label class="label-checkbox" for="wednesday">
    <input type="checkbox" class="check-day" id="wednesday" value="wednesday" />
    Wed
  </label>
  <label class="label-checkbox" for="thursday">
    <input type="checkbox" class="check-day" id="thursday" value="thursday" />
    Thu
  </label>
  <label class="label-checkbox" for="friday">
    <input type="checkbox" class="check-day" id="friday" value="friday" />
    Fri
  </label>
  <label class="label-checkbox" for="saturday">
    <input type="checkbox" class="check-day" id="saturday" value="saturday" />
    Sat
  </label>
  <label class="label-checkbox" for="sunday">
    <input type="checkbox" class="check-day" id="sunday" value="sunday" />
    Sun
  </label>
</div>

When selecting the day, I would like it to look like the following image:

Help me please.

Here is the jsfiddle: https://jsfiddle.net/bardalesj/q7usmayh/1/

look into Vue Guide: classes and styles binding and Vue Guide: Form Input Binding then you will know how to reach the goal. — Sphinx
– Sphinx, Commented Aug 20, 2020 at 22:40

Dan Knights · Accepted Answer · 2020-08-21 03:01:24Z

1

You could v-model the checkboxes to their own data property and use these properties to toggle a class binding:

new Vue({
  el: "#app",
  data: {
    days: [
      { title: 'Monday' },
      { title: 'Tuesday' },
      { title: 'Wednesday' },
      { title: 'Thursday' },
      { title: 'Friday' },
      { title: 'Saturday' },
      { title: 'Sunday' },
    ]
  },
})

.label-checkbox {
  margin-right: 0.87rem;
  margin-left: auto;
  border: 1px solid #4273DE;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  color: #4273DE;
}

.check-day {
  visibility: hidden;
  position: absolute;
  right: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.checked {
  background: #4273DE;
  color: #fff;
}

.checked::before {
  content: "✔";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <label v-for="day in days" :key="day.title" class="label-checkbox" :class="{ 'checked': day.checked }" :for="day.title.toLowerCase()">
    <input type="checkbox" v-model="day.checked" class="check-day" :id="day.title.toLowerCase()" :value="day.title" />
    {{ day.title }}
  </label>
</div>

edited Aug 21, 2020 at 3:01

answered Aug 20, 2020 at 22:45

Dan Knights

8,4184 gold badges28 silver badges55 bronze badges

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

3 Comments

Dan Over a year ago

One of the benefits of components, encapsulation, and OOP in general is not repeating yourself. This code would be considered bad practice for being unnecessarily verbose by not using a collection (array/object) and a v-for.

Sphinx Over a year ago

for best practice, we should use data () {return {}} instead of data: {}

Dan Knights Over a year ago

@Sphinx This is only a concern with reusable components

Collectives™ on Stack Overflow

Change style when checkbox is checked - Vue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related