MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. チェックボックス(複数)

チェックボックス(複数)

Vue.js
2023.08.08

チェックボックス(複数)は、選択オプション全てにv-modelを渡し配列を取得します。

チェックボックス(複数)の説明図
記法

[ HTML ] =============================
　<input type=”checkbox” v-model=”データプロパティ名”>
　<input type=”checkbox” v-model=”データプロパティ名”>
[ Vue.js ] =============================
　data() {
　　return {
　　　データプロパティ名 : データ;
　　},
　},

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>チェックボックス(複数)について</title>
  </head>
  <body>
    <div id="app">
      <p>選択して動きを確認しましょう。</p>
      <form>
        <div>
          <label for="apple">りんご</label>
          <input type="checkbox" id="apple" value="りんご" v-model="fruits" />
        </div>
        <div>
          <label for="grape">ぶどう</label>
          <input type="checkbox" id="grape" value="ぶどう" v-model="fruits" />
        </div>
        <div>
          <label for="orange">オレンジ</label>
          <input type="checkbox" id="orange" value="オレンジ" v-model="fruits" />
        </div>
      </form>
      <p>選択した果物:{{ fruits }}</p>
    </div>

    <script src="./js/multi_checkbox.js"></script>
  </body>
</html>
Vue.createApp({
  data() {
    return {
      // 初期の選択状態
      fruits: ["ぶどう"],
    };
  },
}).mount("#app");
出力結果

選択して動きを確認しましょう。

選択した果物:{{ fruits }}

v-modelの値とデータプロパティ値が等しい場合に選択状態なる

Vue.js