初期は全て表示、チェックボックスで要素を表示、非表示にしたい

Question

初期状態では全て表示されていて、チェックボックスにチェックをつけるとその要素のみ表示されるような処理をJavaScriptで行いたいのですがどのように実装すれば良いのか分からないので、ご存知の方がいらっしゃいましたらご教授いただけますと幸いです。

<div class="form-check form-check-inline">
  <input type="checkbox" multiple= true, include_hidden=false class="form-check-input" id="column1">
  要素1
</div>

<div class="form-check form-check-inline">
  <input type="checkbox" multiple= true, include_hidden=false class="form-check-input" id="column2">
  要素2
</div>

<div class="form-check form-check-inline">
 <input type="checkbox" multiple= true, include_hidden=false class="form-check-input" id="column3">
  要素3
</div>

<div class="column1">
 要素1
</div>

<div class="column2">
 要素2
</div>

<div class="column3">
 要素3
</div>

function displayColumn(){
 ...
}

Comments

[ku__ra__ge]

以下のうち、どれがわかりませんか？
・チェックボックスや表示を切り替えたい要素を取得する方法
・チェックボックスのチェック状態が変化したときに処理を実行させる方法
・チェックボックスのチェック状態を取得する方法
・要素の表示/非表示を変更する方法
・それらを組み合わせて目的の動作を実現する方法

すべて分からないなら質問を行う学習段階ではありません。入門書などを読んで基本的な学習を進めてください。

Answer 1

関連性としてはチェックしたチェックボックスのidと表示したい要素のclassが同じ名前ということですかね。

チェックボックスのクリックイベント取得
→すべての要素を非表示
→イベント発生した自身のidを取得
→取得したidをclassとして指定して表示

のような形となると思います。
まず、ひとつずつやってみてください。

Answer 2

チェックボックスの change イベントリスナーを登録して、その中でチェックボックスの checked プロパティの値で表示の制御をしたい要素の hidden プロパティを更新します。

まずは、このコードを3つのチェックボックスそれぞれについて書けば良いでしょう。1つのコードで済ませることもできますが、質問者さんの力量的にそれは後回しにしましょう。