【メモ】javascriptでおしゃれなボタンとチェックボックスを連動させる

仕様

• ブロックが増減できる入力インターフェイスがnested_form＆simple_formで実装されている。
• 曜日のタブというかボタンをクリックするとclassが付与され、それに対応したチェックボックスにチェックが入る
• class付与されたタブというかボタンをクリックするとclassが初期化され、それに対応したチェックボックスのチェックが外れる
• ロード時、チェックボックスにチェックが入っているものに対応するタブというかボタンにclassが付与される

素のHTML

.daysTab
  .daysTab__label
    営業日を選んでください
    = f.link_to_remove data: { confirm: '営業時間を削除しますか？' } do
      削除
  .daysTab__buttons
    %ul{onclick: "clickToCheck(event)"}
      %li 月
      %li 火
      %li 水
      %li 木
      %li 金
      %li 土
      %li 日
      %li 祝日
      %li 祝日前
  .daysTab__checkboxes
    = f.input :monday
    = f.input :tuesday
    = f.input :wednesday
    = f.input :thursday
    = f.input :friday
    = f.input :saturday
    = f.input :sunday
    = f.input :holiday
    = f.input :before_holiday

この一式が任意で追加削除できる。

• daysTab__checkboxesは最終的にdisplay:noneで非表示になる。
• daysTab__buttonsの部分を好きなようにスタイリングすることでおしゃれなIFが出来上がるｗ

で、出来上がったJSが以下。

function clickToCheck(e) {
  var selfParentNode = e.target.parentNode;
  var selfchildrenNodes = selfParentNode.querySelectorAll("li");
  var selfIndex = Array.prototype.indexOf.call(selfchildrenNodes, e.target);
  var targetParentNode = e.target.parentNode.parentNode.nextElementSibling;
  var targetChildrenNodes = targetParentNode.querySelectorAll('input[type=checkbox]');
  (function clickToChangeClass(className){
    var classlist = e.target.classList;
    if(classlist.contains(className)){
      classlist.remove(className);
    }else{
      classlist.add(className);
    }
  }('active'));
  (function checking(){
    var targetCheckbox = targetChildrenNodes[selfIndex];
    targetCheckbox.checked = !targetCheckbox.checked;
  }());
};
function checkStatus(className){
  document.addEventListener('DOMContentLoaded', function(){
    if(document.getElementById('shopHoursFields') != null){
      var fields = document.querySelectorAll('.fields');
      fields.forEach(function(e){
        var checkboxes = e.children[0].children[2].querySelectorAll('input[type=checkbox]');
        var buttons = e.children[0].children[1].querySelectorAll('li');
        checkboxes.forEach(function(e, index){
          if(e.checked == true){
            buttons[index].classList.add(className);
          }
        });
      });
    }
  }, false);
};
checkStatus('active');

shopHoursFieldsはnested_formで増減するfieldsの親要素

とりあえず動く状態にするしか考えてないので、おそろしく長いし雑ｗ
ブラッシュアップに時間を割けるほど余裕がないので一旦終了。
なんか不具合でたらその都度修正・更新します。