CheckBox で 表示 非表示 を 切り替える スクリプト
この記事は 2019年 3月 9日 に書かれた記事です。
意外と 忘れてしまうんですよね〜
なので 備忘録として 置いておきます
<div>
<input type="checkbox" id="switch-label-01" name="switch" data-target="target-01">
<label for="switch-label-01"> 表示の切り替え</label>
</div>
<div id="target-01" style="display: none;">
<p>表示</p>
</div>
<script>
jQuery(function($){
$('input[name="switch"]').change(function() {
if( $(this).prop('checked') ) {
$( '#'+$(this).data('target') ).show();
} else {
$( '#'+$(this).data('target') ).hide();
}
});
});
</script>
これを ちょっとカスタマイズすると アコーディオン とかも 作れるようになりますね〜
