1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

#仕様

  • ブロックが増減できる入力インターフェイスが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が出来上がるw

#で、出来上がった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の親要素

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?