チェックボックスで要素の表示・非表示をコントロールする

  • チェックボックスで要素の表示・非表示をコントロールする JavaScript です。
  • チェックボックスをいくらでも増やせる設計になっています。
  • ちょっといじれば表示・非表示にする要素を増やすのも簡単です。

実際の表示

コンテンツ 1
コンテンツ 2
コンテンツ 3

コード

HTML

<div id="checkbox">
  <input type="checkbox" target="content-1">
  <input type="checkbox" target="content-2">
  <input type="checkbox" target="content-3">
</div>
<div id="contents">
  <div id="content-1">
    コンテンツ 1
  </div>
  <div id="content-2">
    コンテンツ 2
  </div>
  <div id="content-3">
    コンテンツ 3
  </div>
</div>

CSS

#content-1,
#content-2,
#content-3 {
  float: left;
  display: none;
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}
#content-1 {
  background-color: #f88;
}
#content-2 {
  background-color: #8f8;
}
#content-3 {
  background-color: #88f;
}

JavaScript

$(function() {
  $(document).ready(function() {
    $('[type="checkbox"]').trigger('change')
  })
  $('#checkbox').on('change', '[type="checkbox"]', function() {
    var target = $(this).attr('target')
    var property = $(this).prop('checked')
    if (property) {
      $('#' + target).css('display', 'initial')
    } else {
      $('#' + target).css('display', 'none')
    }
  })
})

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です