[Vue.js]まとめてチェック機能を自作する

2019年2月7日

はじめに

チェックボックスを全部チェックできる機能が急遽必要になり作成しました。

簡単なシステムですが、備忘録的な意味合いで記事を書きます。(なにかしら書かないとズルズルいきそうなので・・・

 

 

環境

Vue.js:v2.6.2

 

使い方

機能を実装するサンプルは以下になります。

HTML

<div id="app">
 <table>
   <thead>
    <tr>
     <th>
      <input type="checkbox"
             v-model="AllChecked"
             value="1"
             v-on:click="clickAllChecked($event)">
    </th>
    <th>Title</th>
    <th>Content</th>
    <th>Date</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>
    <input type="checkbox"
           class="chk"
           value="1"
           v-on:click="clickChecked($event)">
   </td>
   <td>checkbox1</td>
   <td>Hellow world...</td>
   <td>19/02/06</td>
  </tr>
~~
 </tbody>
</table>
</div>

 

Vue

var app = new Vue({
    el: '#app',
    data: {
      AllChecked: 0
    },
    methods: {
      clickAllChecked: function (event) {
        var CHK = document.getElementsByClassName('chk');
        var actionFlg;
        // 全体用のチェックボックスの状態を判断して行のチェックボックスに設定するフラグを格納する
        if (event.target.checked == true) {
          actionFlg = true;
        } else {
          actionFlg = false;
        }
        // 行のチェックボックスにチェックの付けたり外したりする
        for (var i = 0; CHK.length > i; i++) {
          CHK[i].checked = actionFlg;
        }
      },
      clickChecked: function(event) {
         // 全体用のチェックボックスがtrueの時に、行のチェックが一つでもfalseになったら全体チェックもfalseにする
         if(event.target.checked == false){
           this.AllChecked = 0;
         }
      }
   }
});

 

サンプル

See the Pen Vue.js AllChecked Action by カバの樹 (@kabanoki) on CodePen.0

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-,