IT関連

JavaScript チェックボックスのオンオフ切り替え複数の親子を連動させる

投稿日:2019年7月3日 更新日:

親のチェックボックスをオンにすれば、複数ある子のチェックボックスがオンになり、オフにすればオフになる。

そんなコントロールは調べたらすぐ見つかったが、複数の親がある場合に悩んだので備忘録。

 

例えば、

自動車という親、TOYOTA・HONDA・NISSAN・MAZDAという子

パソコンという親、Apple・Lenovo・SHARPという子

モニタという親、IO-DATA・IIYAMA・LGという子

それぞれが1つの画面上にチェックボックスとして存在する場合。

 

自動車の親にaddEventListenerでクリックイベントを追加してクラスを付けた子のチェックをオンオフするロジックは簡単だけど、それぞれの親すべてに同じ処理を書くのは無意味なのは解る。

 

考えたやり方は、まず親のチェックボックスID属性を付与し、onclickでファンクションを付与する。その引数はID属性の値と同じにする。ファンクション名は今回は適当に、js_check_toggleにする。

 

親の参考コードは

こんな感じ。複数親だから、当然DBからデータを取得してループ文でガンガン吐き出すのだから当然変数Aは変化する。

 

子のinputはクラス名を変数Aにする。

こんな感じ。子は複数あるのでID属性ではなくclass属性にする。

これももちろんDBからデータを取得してループ文でガンガン書き出すという前提です。

 

最後にJavaScriptは

 

これでいけた。

スポンサーリンク




スポンサーリンク




-IT関連
-,

執筆者:


  1. 和美 says:

    めっちゃくちゃ細かいんですが、自動車メーカーの「マツダ」は「MATSUDA」ではなく「MAZDA」です。

    • kouji says:

      和美さま

      ありゃ!確かに。広島に住んでいたのになんたるミステイク。
      修正しました。ご指摘ありがとうございました。

comment

Your email address will not be published. Required fields are marked *

関連記事

Laravel エラー集 未完成

POSTが失敗する The page has expired die to inactivity.Please refresh and try agein. というエラーメッセージでPOSTが失敗する …

Windows HDDのデータを復元不可能にする cipherコマンド

Windowsのエクセルやテキストなどのファイルはゴミ箱に入れて、ゴミ箱を空にするだけでは完全に消えない。   こういったファイナルデータのような復元ソフトを使えば、復元できてしまう。 &n …

AS400/IBMi Laravel config設定のschemaについて

備忘録です。   Laravelのdatabase.phpにodbcの設定を入れるが、schemaって何なのか解らなかった。   今みたら設定はしていた。自社の主要なライブラリを指 …

AS400/IBMi 知ってるコマンドまとめと解説

備忘録です。順次追記しますが、何も知らない人間が思いつきで書いています。 逆に、便利なものがあれば教えてほしいです。コメント欄へお願いします。   コマンドの一覧を表示する SLTCMD S …

MarkDown記法 備忘録

ドットインストール様に教わったMarkDown記法。 256timesでなかば強制的に教えられたが、実際に覚えてみるといろんなところで使える。 Qiitaはもちろん使えるし、BackLogでも使える。 …

Adsense広告




文字で検索

人気記事

なぜだか人気記事

読んでほしい順に