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

  • チェックボックスで要素の表示・非表示をコントロールする 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')
}
})
})

コメントを残す

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