複数チェックボックスで要素の表示非表示を切り替える

備忘録と勉強のために残しておくだけ。

要件

1. 以下の項目を記載したチェックボックスを作成
   ・りんご(value = apple)
   ・バナナ(value = banana)
   ・みかん(value = orange)

2. 各項目のvalueと同じクラス名をもつdivを作成

   <div class="apple">りんご</div>
   <div class="banana">バナナ</div>
   ...
   

3. 2で作成したdivの初期状態は非表示

4. 1で作成したチェックボックスをオンにしたら、valueに対応したdivに.selectedクラスをつける

5. .selectedがついたdivを表示する

6. チェックボックスはオフになったら、対応しているdivの.selectedクラスを削除する

コードとデモ

JSに関してはコードの中にコメントあり。

See the Pen 複数チェックボックスJS by mamenon (@mamenon) on CodePen.