Javascriptでチェックボックスのチェックがついたものだけ削除する

Question

前提・実現したいこと

Web上に表示しているデータベースのデータをチェックボックスにチェックして削除ボタンからチェックしたものだけを削除したいです。

発生している問題・エラーメッセージ

チェック項目を取得までは出来たが、それの削除処理をどのように書けばいいかわからない。

該当のソースコード

【PHP】

省略

<button class="btcommon" onClick="boxCheck()"> <image type="image" id="deletech" name="deletech" style="vertical-align:initial;" src="{{ asset('img/delete.png') }}" value="削除"> </button> <?php if(isset($data)){ 　　 　$count = 1; 　foreach($data as $val) { ?>

　<tr align="left">
<td align="center">
<input type="checkbox" name="deletecheck" id="deletecheck{{ $count }}" value="editData({{ $val->id }});">
</td>

<?php $count++; }} ?>

【js】
function boxCheck(){
var flag = false;
for (var i = 0; i < document.bangumi_s.deletecheck.length; i++) {
if (document.bangumi_s.deletecheck[i].checked) {
flag = true;
alert(document.bangumi_s.deletecheck[i].id+ "が選択されました。");
}
}
if (!flag) {
alert("項目が選択されていません。");
}
}

試したこと

いろいろ調べてみたがよくわからなかった。
removeChildを使うといいと検索結果が出たが、よくわからない。

補足情報（FW/ツールのバージョンなど）

初めての質問ですので、どのように質問したら良いのかわからなかったので、説明不足でしたらすみません。
この説明でやりたいことが通じていたら嬉です。
よろしくお願い致します。

Comments

[x_x]

何の削除ですか？ データならPHPの処理になるでしょう

[yambejp]

表面上HTMLから削除するならremoveChildでしょうけど、DBから削除するならPHPにパラメータで渡してDB操作をしないといけません

[darichia]

>>x_xさん
SQLサーバ内のテーブルです。初心者なので全然把握していません...がよろしくお願いします。

[m.ts10806]

javascriptのremoveChildとなると、あくまで表面上の削除だけで画面リロードしたら復活しますけど、それで良いのでしょうか。

[darichia]

>>mst10806さん
表面上ではなく、DB内のdeleteフラグをtrueにしたいです。

Answer 1

すぐに思いつくのは以下の2通り。

１：
・全体をform（method=post）で囲って「チェックした項目を削除」ボタンを置き、ボタンクリックで送信。
・PHPでチェックしたIDを受け取り、delete文を流す

• 【PHP】チェックボックスの値を受け取る

２：
・チェックしたIDをjavascriptよりajax介してphpに送信
・PHPでチェックしたIDを受け取り、delete文を流す

• jQueryのAjaxをPHPで使うやつ

記事はmysqlのやつなので環境にあわせて適宜読み替えてください。

Comments

[darichia]

ありがとうございます。Ajaxは興味がある程度で触れたことが無いので出来るか不安ですが、参考にさせていただきます。

[m.ts10806]

ajaxは覚えることでできることの幅や表現力が一気に広がるので、ぜひ（ほぼ必須の技術です）

Answer 2

DBから削除するのであれば
チェックボックスのnameは

name="deletecheck[]"

のようにしたほうがいいでしょう。その上で

$deletecheck=filter_input(INPUT_POST,FILTER_DEFALT,FILTER_REQUIRE_ARRAY);

のように削除したいIDをうけとってPHPでPDOかなにかで
DELETE文を発行して下さい

Comments

[darichia]

ありがとうございます。参考にしてみます。