---
tags: Vue 實戰班
---

# Checkbox 與 Radio

預設來說，checkbox 是作為一個資料的 true or false。

<div id="app">
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check1" v-model="checkbox1">
    <label class="form-check-label" for="check1">{{ checkbox1 }}</label>
  </div>
</div>

var app = new Vue({
  el: '#app',
  data: {
    checkbox1: false,
  },
});

<iframe height="265" style="width: 100%;" scrolling="no" title="Checkbox 與 Radio-1" src="https://codepen.io/hsiangfeng/embed/xxwgdYv?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/hsiangfeng/pen/xxwgdYv'>Checkbox 與 Radio-1</a> by Ray
(<a href='https://codepen.io/hsiangfeng'>@hsiangfeng</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

或者可做為多個選向，將資料綁定到同一個陣列內。

<div id="app">
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check2" v-model="checkboxArray" value="雞">
    <label class="form-check-label" for="check2">雞</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check3" v-model="checkboxArray" value="豬">
    <label class="form-check-label" for="check3">豬</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check4" v-model="checkboxArray" value="牛">
    <label class="form-check-label" for="check4">牛</label>
  </div>
  
  {{ checkboxArray }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    checkboxArray: [],
  },
});

<iframe height="265" style="width: 100%;" scrolling="no" title="Checkbox 與 Radio-2" src="https://codepen.io/hsiangfeng/embed/VwvPbXe?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/hsiangfeng/pen/VwvPbXe'>Checkbox 與 Radio-2</a> by Ray
(<a href='https://codepen.io/hsiangfeng'>@hsiangfeng</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

Radio 則是單一選項

<div id="app">
  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio2" v-model="singleRadio" value="雞">
    <label class="form-check-label" for="radio2">雞</label>
  </div>
  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio3" v-model="singleRadio" value="豬">
    <label class="form-check-label" for="radio3">豬</label>
  </div>
  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio4" v-model="singleRadio" value="牛">
    <label class="form-check-label" for="radio4">牛</label>
  </div>

  您選擇了：{{ singleRadio }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    singleRadio: '',
  },
});

<iframe height="265" style="width: 100%;" scrolling="no" title="Checkbox 與 Radio-3" src="https://codepen.io/hsiangfeng/embed/bGVgWvY?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/hsiangfeng/pen/bGVgWvY'>Checkbox 與 Radio-3</a> by Ray
(<a href='https://codepen.io/hsiangfeng'>@hsiangfeng</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>