技術資料

以下のような何らかの情報の一覧画面があって、チェックボックスにチェックを入れる/外すだけで、サーバーサイドで情報の更新をする、というインターフェイスはよくあると思います。
この例だと、チェックを入れたユーザーの利用停止フラグをオンにする感じ。

こういうのをできるだけ汎用性のある形で実装してみようと思います。

HTML側 - data属性で情報を付与する

HTML側では、input要素(checkbox)に、data属性で情報を付与しておきます。

<table>
    <tr>
        <th>ユーザー名</th>
        <th>メールアドレス</th>
        <th>最終ログイン時刻</th>
        <th>利用停止</th>
    </tr><tr>
        <td>mochimochi_panda</td>
        <td>mochimochi.panda@example.com</td>
        <td>2024-11-26 22:15:43</td>
        <td>
            <input type="checkbox" name="is_suspended" value="1"
            class="trigger-postcheckdata"
            data-posturl="https://mydomain/script/update_is_suspended/1">
        </td>
    </tr><tr>
        <td>oshogatsu2024</td>
        <td>kagami.mochi@example.com</td>
        <td>2024-11-23 08:02:17</td>
        <td>
            <input type="checkbox" name="is_suspended" value="1"
            class="trigger-postcheckdata"
            data-posturl="https://mydomain/script/update_is_suspended/2">
        </td>
    </tr><tr>
        <td>kaiju_luv</td>
        <td>godzilla.1954@example.com</td>
        <td>2024-11-25 16:30:05</td>
        <td>
            <input type="checkbox" name="is_suspended" value="1"
            class="trigger-postcheckdata"
            data-posturl="https://mydomain/script/update_is_suspended/3">
        </td>
    </tr><tr>
        <td>bishamonten</td>
        <td>shogi.yama@example.com</td>
        <td>2024-11-27 10:11:03</td>
        <td>
            <input type="checkbox" name="is_suspended" value="1"
            class="trigger-postcheckdata"
            data-posturl="https://mydomain/script/update_is_suspended/4">
        </td>
    </tr><tr>
        <td>bz_fever88</td>
        <td>tak.matsumoto@example.com</td>
        <td>2024-11-27 09:00:00</td>
        <td>
            <input type="checkbox" name="is_suspended" value="1"
            class="trigger-postcheckdata"
            data-posturl="https://mydomain/script/update_is_suspended/5">
        </td>
    </tr>
</table>

data-posturlに、チェックボックスがチェックされた/外された時に送信するサーバー側プログラムへのURLを指定しておきました。
今回の例だと、update_is_suspended という処理に各ユーザーのID番号を付与してURLとして指定しています。

また、各チェックボックスには、共通のクラスを指定しておきました(今回の例では trigger-postcheckdata というクラス名)。

JavaScript側 - チェックボックスの状態を見て値を付与

チェックボックスがチェックされた/外された時に起動するJavaScript側の処理は以下のような感じ(今回はjQueryを使います)。

// クラス「trigger-postcheckdata」の値が変更されたら起動
$(".trigger-postcheckdata").change(function(){
    // チェックボックスがオフなら「0」、オンなら「1」の値を設定
    let val = 0;
    if($(this).prop('checked')){
        val = $(this).val();
    }
    // data-posturlの値のURLに、チェックボックスの値を付与してPOST
    let post_url = $(this).data('posturl');
    post_url += '/' + val;
    $.ajax({
        url: post_url,
        type: 'POST',
        dataType: 'html',
        timeout: 5000,
    })
    .done(function(data) {
        // 成功時の処理
        console.log(data);
    })
    .fail(function(jqXHR, textStatus) {
        // 失敗時の処理
        console.log(textStatus);
        alert('Error: postcheckdata');
    });
});

上記のスクリプトで、以下のURLに対してPOSTされることになります。

チェックボックスオンの時

https://mydomain/script/update_is_suspended/[user_id]/1

チェックボックスオフの時

https://mydomain/script/update_is_suspended/[user_id]/0

サーバーサイドでは、このURLで受け取った値を元に、データを更新すればOK。