IT関連

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

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

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

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

 

例えば、

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

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

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

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

 

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

 

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

 

親の参考コードは

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

 

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

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

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

 

最後にJavaScriptは

 

これでいけた。

スポンサーリンク




スポンサーリンク




-IT関連
-, ,

執筆者:


comment

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

関連記事

AS400/IBMi 無料でWeb化 GUI化 オープン化 PHP/Laravel開発編

注意 これは私の環境下における私の備忘録です。お使いの環境によっては内容が異なる場合があります。システム管理者でない方は絶対にやらないでください。システムにはログが残るものなので、万が一があればクビに …

Git .gitignoreが利かないというかおかしい件

ブログなので皆さまのお役にたてば幸いですが、あくまで自分の忘備録なので、昔話も含めて書いております。ご了承ください。 環境は、 開発環境は自席PC(ローカル) Windows10PC XAMPP7.2 …

FTPができるようにしておかないとな

そろそろバックアップを取らなければならないな。投稿数が伸び悩む中でも、これだけの投稿が一瞬で無くなってしまうのも、ぞっとする。もしバックアップ&復元が失敗したら、今書いている文字すら電子のチリとなって …

【ExcelVBA】Dictionaryオブジェクトを使って連想配列

部署・取引先・売上・差益と並んだエクセルがあるとする。 部署取引先コード売上差益 111000015,000,000500,000 111000023,000,000300,000 111000032 …

AS400/IBMi に対してPCからFTPで通信する

接続 Windowsコマンドプロンプトを開く C:\User\User> ftp ftp> open IPアドレス ユーザーIDを入力する パスワードを入力する   使えるコマン …

Adsense広告


文字で検索

人気記事

なぜだか人気記事

読んでほしい順に