Laravel、jQueryで複数のチェックボックスデータを非同期（Ajax）削除する

個人メモ。
# 環境
- Laravel 10.4.1
- PHP 8.2.4

# やること
一覧画面の一覧の各データにチェックボックスが付いている状態で、複数のチェックボックスにチェックを付け、「まとめて削除」リンクをクリックすることで、jQueryで非同期（Ajax）で、テーブルデータをまとめて削除する。

# 設定内容
- viewファイルの中身、jQuery部分。

viewファイルのコード（簡略化したもの）。同じチェックボックスのname値（chk_todo）で、foreachで回して、valueが違うソースを作る。この`$item->id`はテーブルの主キーです。
```PHP:viewファイル
@foreach ($items as $item)
    <input type="checkbox" name="chk_todo" value="{{ $item->id }}">  {{ $item->title }}
@endforeach
```
- 出来上がったページのブラウザソースを簡略化したものが下記。
nameが同じ"chk_todo"でvalueが違うチェックボックスができあがる。このvalue値はテーブルの主キーです。
```source:ブラウザソース
<input type="checkbox" name="chk_todo" value="10">  todoメモその1
<input type="checkbox" name="chk_todo" value="11">  todoメモその2
<input type="checkbox" name="chk_todo" value="12">  todoメモその3
<input type="checkbox" name="chk_todo" value="13">  todoメモその4
<input type="checkbox" name="chk_todo" value="14">  todoメモその5
```

- viewファイルの「まとめて削除」リンク。この`id="chkdel"`のクリックでjQueryを呼び出す。
```PHP:viewファイル
<a  id="chkdel" href="javascript:void(0);" class="black">まとめて削除</a>
```

- viewファイルのjQuery部分。
`chkdel`のクリックイベントで動作。
チェックが付いたチェックボックス要素を`$('input[name=chk_todo]:checked')`で取得し、これを、mapメソッドを使って value属性値の配列として変換して、変数（配列）valsに取得。
`if(vals.length == 0) {`でチェックが0かどうかを判定し、0なら処理終了。
その後は
`var deleteConfirm = confirm('チェックをまとめて削除してよろしいですか？');`で確認メッセージを出し、OKならjQuery通信に配列valsを送る。
ajaxの送信設定は
`type: "POST",`
`url: "/todo/del_multi",`
`dataType: "text",`
`    data: {`
`  　　  id: vals,`
`　　},`
とする。

```PHP:viewファイルのjQuery部分
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function() {
	$("#chkdel").click(function() {

    /// チェックされたvalue値を配列として取得
    var vals = $('input[name=chk_todo]:checked').map(function(){
      return $(this).val();
    }).get();
    console.log(vals);
    console.log(vals.length)

    if(vals.length == 0) {    
        alert('チェックされていません');
        return false;   //処理中断
    }

    var deleteConfirm = confirm('チェックをまとめて削除してよろしいですか？');
    if(deleteConfirm == true) {    
        $.ajaxSetup({
            headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),},
        });
        $.ajax({
        //POST通信
        type: "POST",
        //ここでデータの送信先URLを指定します。
        url: "/todo/del_multi",
        dataType: "text",
        data: {
            id: vals,
        },
        })
        // 成功
        .done(function (results){
            // alert('成功');

            // 通信成功時の処理
            console.log("results : " + results);        
            window.location.href = "/todo";     //削除後に画面を遷移

        })
        // 失敗
        .fail(function(jqXHR, textStatus, errorThrown){
            alert('失敗');
            console.log("ajax通信に失敗しました");
            console.log("jqXHR          : " + jqXHR.status); // HTTPステータスが取得
            console.log("textStatus     : " + textStatus);    // タイムアウト、パースエラー
            console.log("errorThrown    : " + errorThrown.message); // 例外情報
            console.log("URL            : " + url);        
        });
    }

      });
  });
</script>

```
- routeの設定
'/todo/del_multi'がjQueryでPOSTで呼び出された場合、TodoControllerのremove_multi関数を呼び出すようにする。
```php:web.php
Route::post('todo/del_multi', 'App\Http\Controllers\TodoController@remove_multi');
```

- TodoControllerのremove_multi関数
呼び出されるTodoControllerのremove_multi関数。
`$request->id`(配列)で渡された複数の主キーの、todoテーブルの複数レコードを削除する。
```php:TodoController.php
use Illuminate\Http\Request;
use App\Models\Todo;
class TodoController extends Controller
{
    public function remove_multi(Request $request){

        // eloquentによる複数削除
        Todo::destroy($request->id);    //複数データ削除（IDは配列で複数）

    }  //end funtion 
}
```
Eloquentのdestroyメソッドは、主キーの配列を削除することができます。
>destroyメソッドは、単一の主キーを受け入れることに加えて、複数の主キー、主キーの配列、または主キーのコレクションを引数に取ります。
Flight::destroy(1);
Flight::destroy(1, 2, 3);
Flight::destroy([1, 2, 3]);
Flight::destroy(collect([1, 2, 3]));
[Laravel 10.x Eloquentの準備 - 主キーによる既存のモデルの削除](https://readouble.com/laravel/10.x/ja/eloquent.html)

これで、複数のチェックボックスに対して、複数チェック時に一括削除の動作確認ができました。

# 関連
[Laravel、jQueryで非同期（Ajax）でレコードを削除する](https://qiita.com/ky-jp16/items/7cb63451bde0372bccb2)

# 参考
[jQueryでチェックボックスの value を複数取得するやり方 | PisukeCode](https://pisuke-code.com/jquery-get-checked-vals-as-array/)