作成の背景

よく可変で入力フォームを作成する事があり、備忘録として参考コードを残そうと思ったから。
どんな感じで書くっけ？って、思った時すぐ思い出せるように、まとめます。

環境

JQUery
CakePHP4

概要

DBテーブルにある回答フォームの配列から可変で複数のフォームが自動生成されます。
そのフォームを入力した際、視覚的に入力済みを確認できるよう入力した場合、背景色を変更します。
この変更をJSでやろうという事です。

さっそくコード

    $(document).ready(function() {
        $('input[type="checkbox"]').change(function() {
            var infoBox = $(this).closest('.info-box');
            //ここでcheckboxのcheckedの有無を確認してます。
            if ($(this).is(':checked')) { 
            infoBox.css('background-color', '#dc143c');
            } else {
            infoBox.css('background-color', '');
            }
        });
    });

全checkboxが対象になります。
状態が変わったcheckboxを着火

    <div class="row">
        <?php foreach ($questions as $question): ?>
            <div class="info-box" id="info-box-<?= $question->id ?>">
                <div class="spantag"><label><?= h($question->content) ?></div>
                    <div style="margin-top: 10px;">
                        <?php 
                        echo $this->Form->checkbox('answers.' . $question->id, ['value' => 1]);
                        ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>

感想

バックエンドの処理を考えていると、フロントのこういう事が疎かになってしまいます。
今回でだいぶ整理できました。
最後までお読みいただき、ありがとうございました。