JavaScriptでチェックボックスのチェックされた順番を取得してみる

CheckBoxのチェックされた順番を使用してやりたいことがあったので、JavaScriptを勉強してみました。

ちなみに今回初めてJavaScriptに触れた超初心者なので、悪戦苦闘でした。

しかも全然情報が出てこないので、困りました。

参考にさせて頂いたサイト様

checkboxでチェックされた順番を取得する方法
 チェックボックスにチェックした順番を表示したい - ハリマカツユキ・旧技術ブログ

備考

画面上には取得した順番は表示されませんが、HTMLソースをみるとチェックボックスのclassが変化します。

また、参考にさせて頂いた元のソースでは、一度チェックしてしまうとclassの中身が消えないようだったので、ちゃんと消えるようにアレンジしてみました。

勉強用にコメントも付与しています。

JavaScriptソース

(function() {//無名関数 bodyの一番下で読み込まないとエラー
    var input = document.querySelectorAll(".items input");
    var orders = [];
    addSelectedOrder (input, orders);
})();

function addSelectedOrder (input, orders) {

  //チェックされたチェックボックスを全部消すButton(Class btnClearAll)を用意
  var tgt = document.querySelector(".btnClearAll");
  tgt.addEventListener("click", function() {
    orders = [];
    for(var i = 0; i < input.length; i++) {
      input[i].checked = false;
    }
    tgt.disabled = "disabled";
  },false);

  //ここからチェックボックスの処理
  for(var i=0; i< input.length; i++) {//object一つ一つにEventListenerを付与
    input[i].addEventListener("change", function(e){
      if(e.target.checked) {
        orders.push(e.target.id);//クリックされたらorderの末尾に追加
      } else {
        //チェックが外れたら外れたものをordersから削除
        for (var k = 0; k < orders.length; k ++) {
          if(orders[k] == e.target.id) {
            orders.splice(k, 1);
          }
        }
      }

      //最新化されたordersを元にclassの中身を変更
      if (orders.length == 0){//ordersに何も入っていなければclassを全て削除
        for(var f =0; f <input.length; f++){
          input[f].className = "";
        }
      }else{//入っていればinputを全部舐めてclassを追加・削除[f:id:taris777:20180303002410p:plain]
        for(var l =0; l <input.length; l++) {
          for(var j=0; j< orders.length; j++) {
            if (input[l].id == orders[j]) {
              input[l].className = "order" + (j + 1);
            }else{
              input[l].classList.remove("order" + (j + 1))
            }
          }
        }
      }

      //ordersのlengthがinputのオブジェクト数と同じであればenabled,それ以外はdisabled
      if (orders.length == input.length){
        tgt.disabled = "";
      }else{
        tgt.disabled = "disabled";
      }

    }, false);
  }
}

HTML側

<button type="submit" class="btnClearAll" disabled>Clear</button>

<div class="items">
    <input type="checkbox" id="ck01">
    <input type="checkbox" id="ck02">
    <input type="checkbox" id="ck03">
    <input type="checkbox" id="ck04">
    <input type="checkbox" id="ck05">
</div>