# Собственные значения для состояния чекбокса

По умолчанию для отмеченного состояния используется значение true, а для неотмеченного - false. Но вместо них можно определить свои собственные значения для обоих состояний и между этими значениями переключаться:

```markup
<input
  type="checkbox"
  v-model="toggle"
  true-value="да"
  false-value="нет"
>
```

* &#x20;если чекбокс выбран: `vm.toggle === 'да'`
* если чекбокс сброшен: `vm.toggle === 'нет'`

Так же можно связывать чекбоксы через `v-model` :

```markup
<div id="app">
    <input
        type="checkbox"
        v-model="light"
        v-bind:true-value="on"
        v-bind:false-value="off"
    />
      <span v-if="light===on">Выключить</span>
      <span v-else>Включить</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            on: true,
            off:false,
            light: true
        }
    });
</script>
```

Вместо значений `true` и `false` флажок привязывается к одному из свойств `on` или `off`. С помощью атрибута `v-bind:true-value="on"` отмеченное состояние будет сопоставляться со свойством `on`. Соответственно в неотмеченном состоянии флажок приобретает значение `off`. А само выбранное значение попадает в свойство `light`.

<div align="left"><img src="https://955258160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LuIgnBBZPLjlzke50z9%2F-Lxu3YLax3fmCaK3z-B2%2F-LxwBGHAlE500PhwGchd%2Fimage.png?alt=media&#x26;token=13ff8114-79d1-4d9f-8578-1d7a3b057e05" alt=""></div>

{% hint style="info" %}
Атрибуты `true-value` и `false-value` не влияют на атрибут `value` тега input, потому что браузеры пропускают невыбранные чекбоксы при отправке форм. Чтобы гарантированно отправлять одно из двух значений с формой (например, «да» или «нет») используйте радиокнопки.
{% endhint %}
